Question

我正在尝试创建一个用户可以创建自己的社交网络按钮的网站。（我知道它已经完成但主要用于练习）。该网站的一部分将允许用户选择按钮的形状。这是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);
}

Answer 1

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);

Answer 2

这很详细，但您可以使用：

$(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>

Answer 3

如果您正在寻找纯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 = '';
}

JSFiddle：http://jsfiddle.net/hKePD/

的的 **编辑**

或者，如果您要查找始终选中的复选框，可以尝试以下操作：http://jsfiddle.net/hKePD/1/

Answer 4

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

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

使用DIV创建我自己的类似收音机的按钮？

4 个答案: