Question

这可能是一个初学者的问题..

我正在尝试创建一个购物列表应用，允许我检查和取消检查项目以及删除项目。我有<li> id = "list"。我的<li>里面还有一个带class= "remove"的按钮（所以当我点击它时，它会删除整个列表）...到目前为止，我有它工作所以当我点击单词转灰色。我如何定位，所以当我取消选中该复选框时它会恢复正常？

注意：我使用的是输入类型复选框，而不是按钮。

 $('#list').click(function() { 
    $( this ).css( "color", "gray" );
    $( ".remove").css("background-color", "gray" );
   });
});

这是HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Awesome Shopping List</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
    <section class="app-container">
        <div class="top-nav">
            <h1>My Awesome Shopping List</h1>
                <input type="text" id="message" value="Enter item..">
            <button class="add-button" type="button">Add</button>
        </div>
        <div class="main-list">
        <div class="top-labels">
            <h2>Items</h2>
            <h2>Price</h2>
            <h2>Amount</h2>
        </div>
        <div id="messages">
          <ul class="items">
          <li id="list"><input type="checkbox" id="check">Item One<input type="text" class="price" value=""><input type="text" class="amount" value=""><button type="button" class="remove">x</button></li>
            </ul>
        </div>
            <div class="total-container">
                <h3>Total</h3>
                <input type="text" value="">
            </div>  
    </section>
</body>
</html>

我有一个在线项目here的链接。

Answer 1

使用.toggleClass（）并定义两个定义了css的类。

$( "#list" ).click(function() {
      $(this).toggleClass( "class1", "class2" );
});

Answer 2

如果您尝试切换某些内容的可见性/可用性，我建议您创建两个不同的类。

1表示普通列表/列表项，例如class =＆＃34; normal＆＃34; 2用于删除/禁用列表/列表项。

例如点击之前的列表项就像

当您单击按钮并删除列表项时，则添加已删除的类

并且在css中，删除的类将覆盖正常列表项的文本颜色和可见性设置。

当您想要重新启用该项目时，您所做的就是删除＆＃34;已删除的＆＃34;类。

$（＆＃34; .someitem＆＃34;）。removeClass（＆＃34;删除＆＃34;）

Answer 3

首先，我强烈建议使用CSS类，而不是直接操作CSS属性。更重要的是，在您的处理程序中，您可以确定是否现在使用

检查该框

$(this).is(':checked')

Answer 4

我个人不是toggleClass()的粉丝，因为它并不关心复选框的当前状态，这可能与您的期望不符。

我建议将CSS更改基于复选框本身的状态。

var checkboxSelector = '#list input[type=checkbox]'; // or whatever it is for you.
$(checkboxSelector).on('click', function() {
  if($(this).is(':checked'))
     $(this).css('color','grey');
  } else {
     $(this).css('color','white');
  }

}

Answer 5

如果没有看到您的HTML，我会说这可能是您正在寻找的。如果您向我提供了html，我可以帮助您更有效地定位它。现在，重要的是要注意您可能正在将样式应用于您可能不想要的列表项。

$('#list input[type="checkbox]').click(function () {
    if (!$(this).value()) {
        $(this).css("color", "black");
        $(".remove").css("background-color", "white");
    }
});

使用JQuery操作CSS

5 个答案: