2

我正在尝试创建一个用户可以在那里创建自己的社交网络按钮的网站。（我知道它已经完成，但主要是为了练习）。该网站的一部分将允许用户选择按钮的形状。这是HTML：

<div class="design" id="shape">
  <div class="shapeSelect square" id="square"></div>
  <div class="shapeSelect rounded" id="rounded"></div>
  <div class="shapeSelect circle" id="circle"></div>
</div>

我想做的是在单击 div 时添加一个事件侦听器。单击后，类属性将更改为“已选择”。当另一个将被单击时，第一个单击的将被清除并选择下一个。就像单选按钮一样。

我熟悉 JavaScript，我的想法是这样的：

    window.onload = function () {
    'use strict';
    document.getElementById("square").addEventListener('click', function (e) {//adds the event listener
       divArray = document.getElementById("shape");//Here is my first issue: an array is not returned
       if (!(document.getElementById("square").getAttribute("class") == "shapeSelect square selected")) {// checks to make sure its not already selected
            for (i = 0, count = document.getElementById("shape").length; i < count; i++) {// if it isn't go through the array
                divArray[i]// and this is where i also get stuck. I Can't figure out how i would return the class attribute to be class="shapeSelect circle" instead of class="shapeSelect circle selected"
            };
        }
    }, false);
}
4

4 回答 4

2

scdavis41 的答案的更简单版本：

$(document).ready(function(){  
  $('#shape > .shapeSelect').click(function(){
    $('#shape > .shapeSelect').removeClass('selected');
    $(this).addClass('selected');
  });
});

我还放置了一个选择器，其中包含控件的主 div id，以防您想在页面中多次放置此控件。

** 编辑 **

如果你绝对想使用 javascript 和 DOM 试试这个：

document.getElementById("square").addEventListener('click', function (e) {
    var divArray = document.getElementById("shape").getElementsByTagName("div"); //Get all the div child element of the main div

    for (i = 0, count = divArray.length; i < count; i++) {
        if(divArray[i].getAttribute("class").indexOf("selected") !== -1) { //check if the selected class is contained in the attribute
            divArray[i].setAttribute("class", divArray[i].getAttribute("class").replace("selected", "")); // clear the selected class from the attribute
        }
    };

    document.getElementById("square").setAttribute("class", document.getElementById("square").getAttribute("class").concat(" selected")); //select the square
}, false);
于 2013-07-25T20:40:41.120 回答
0

基于 scadvis41 的答案，这要短得多：

$(document).ready(function(){  
  $('.shapeSelect').click(function(){
    $('.shapeSelect').removeClass('selected');
    $(this).addClass('selected');
  });
});
于 2013-07-26T15:20:56.100 回答
0

这很冗长，但您可以使用：

$(document).ready(function(){  
  $('#square').click(function(){
    $('.shapeSelect').removeClass('selected');
    $(this).addClass('selected');
  });
  $('#circle').click(function(){
    $('.shapeSelect').removeClass('selected');
    $(this).addClass('selected');
  });
  $('#rounded').click(function(){
    $('.shapeSelect').removeClass('selected');
    $(this).addClass('selected');
  });
});

这是jQuery，这意味着您必须加载 jQuery 库，但将其放在您的脚本标签上方：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
于 2013-07-25T20:24:09.947 回答
0

如果你正在寻找一个纯 JavaScript 解决方案，你可以试试这个：

if(option == 'add'){
    element.className = element.className + ' selected';
    element.onclick = function() {select(this.id, 'remove')};
    element.innerHTML = '&#10003;';
}
else if(option == 'remove'){
    element.className = element.className.replace(/\bselected\b/,'');
    element.onclick = function() {select(this.id, 'add')};
    element.innerHTML = '';
}

JSF中：http://jsfiddle.net/hKePD/

**编辑**

或者，如果您正在寻找一个始终被选中的复选框，您可以试试这个：http://jsfiddle.net/hKePD/1/

于 2013-07-25T20:58:48.190 回答