Question

我想更改单击时要更改的li元素的背景颜色。因此，当用户点击第一个li时，背景颜色应为红色，当他点击第二个时，第二个应该变为红色，但第一个应该变为白色。

简而言之，应更改所选li的背景颜色以显示其突出显示。

此外，还应仅选中复选框中的复选框。我试着像下面这样做。但它正在改变所有选定的李氏.. 请帮忙。

<html>
<head>
<script type="text/javascript" src="http://editor.webyana.com/javascripts/client_scripts/potential/jquery.js"></script>
<script>
$(document).ready(function () {
    $("li.gc").click(function () {

        $("li.gc").each(function (i) {
            $("li.gc[i]").css({
                backgroundColor: '#FFA700'
            });
        });
        $(this).css({
            backgroundColor: '#000000'
        });

        $(this).children("input[type=checkbox]").attr('checked', 'checked');

        //do something with the sortcat
    });

});
</script>
</head>
<body>
    <ul>
        <li class="gc">
            <input type="checkbox" />
            Check1
            <a>Link1</a>
        </li>
        <li class="gc">
            <div>
                <input type="checkbox" />
                Check2
                <a>Link2</a>
            </div>
        </li>
        <li class="gc">
            <div>
                <input type="checkbox" />
                Check3 Link3
            </div>
        </li>
        <li class="gc">
            <div>
                <input type="checkbox" />
                Check4 Link4
            </div>
        </li>
    </ul>
</body>

</html>

Answer 1

我建议您使用CSS中的类并简化逻辑，而不是使用css函数。请参阅this fiddle。

// store this for later use. only search once!
var items = $("li.gc");

items.click(function() {
    // again, only need to run this once - cache the selector!
    var item = $(this);
    // remove the selected class and uncheck all the inputs for all items
    items.removeClass("selected").find("input").removeAttr("checked");
    // add the selected class and check the input
    item.addClass("selected").find("input").attr('checked', 'checked');
});

仅供您参考，以下是您的原始代码构思（使用.css()）扩展：

$("li.gc").click(function () {
    $("li.gc").css({
        backgroundColor: '#FFA700'
    });
    $(this).css({
        backgroundColor: '#000000'
    });

    $(this).children("input[type=checkbox]").attr('checked', 'checked');

    //do something with the sortcat
});

当您使用.css()作为设定者时，它会对所有匹配的项目进行操作。

Answer 2

首先在你的CSS中定义一个“红色”类。

.red {
       background-color: red;

    }


$("li.gc").click(function() {
    // Then on-click remove it from all at first
     $("li.gc").removeClass("red");
    // and add it to the clicked one

    $(this).addClass("red");

});

Answer 3

Uku Loskit的回答是正确的方向。但是，要解决为什么您的原始想法不起作用，这是因为li.gc[i]不是正确的CSS选择器：它会查找具有<li />类_并且具有属性的所有gc标记名为i，因为[foo]是具有foo属性的代码的CSS选择器。

以下是一些可能符合您要求的代码：

$(document).ready(function () {
  $("li.gc").click(function () {
      // Reset all <li />s with the .gc class to white
      $("li.gc").css("background-color", "white");

      // But now set the one that was just clicked to red.
      $(this).css("background-color", "red");

      // Similarly uncheck all checkboxes
      $("li.gc input[type=checkbox]").attr("checked", false);

      // But now check the checkbox child of the just-clicked <li />.
      $(this).find("input[type=checkbox]").attr("checked", true);
  });
});

Answer 4

与siblings一起尝试，获取匹配元素集中每个元素的兄弟，可选择由选择器过滤。

$("li.gc").click(function(){
  $(this)
     .css('background-color','#f00')
     .siblings()
     .css('background-color','#fff');  
});

<强> fiddle here

更新

使用单选按钮进行单选

  <li class="gc">
        <input type="radio" name="groupname" />
        Check1
        <a>Link1</a>
    </li>
    <li class="gc">
        <div>
            <input type="radio" name="groupname"  />
            Check2
            <a>Link2</a>
        </div>
    </li>
    <li class="gc">
        <div>
            <input type="radio" name="groupname"  />
            Check3 Link3
        </div>
    </li>
    <li class="gc">
        <div>
            <input type="radio" name="groupname" />
            Check4 Link4
        </div>
    </li>

脚本如：

$(".gc").click(function(){
  $(this)
     .css('background-color','#f00')
     .siblings()
     .css('background-color','#fff')
     .end()
     .find(':radio')
     .attr('checked','checked'); 
});

fiddle here

李和复选框的Jquery背景颜色

4 个答案: