Fatal编程技术网

Javascript 使用JQuery操作CSS

javascript css

Javascript 使用JQuery操作CSS,javascript,css,Javascript,Css,这可能是个初级问题 我正在尝试创建一个购物清单应用程序，允许我检查和取消检查项目以及删除项目。我有一个id=list的列表。我还有一个按钮，里面有class=remove，所以当我点击它时，它会删除整个列表…到目前为止，我已经让它工作了，所以当我点击单词时，它会变成灰色。我该如何瞄准这一点，这样当我松开复选框时，它就会恢复正常 注意：我使用的是输入类型复选框，而不是按钮 $('#list').click(function() { $( this ).css( "color", "gr

这可能是个初级问题

我正在尝试创建一个购物清单应用程序，允许我检查和取消检查项目以及删除项目。我有一个id=list的列表。我还有一个按钮，里面有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>
我有一个在线项目的链接

使用.toggleClass并使用已定义的css定义两个类

$( "#list" ).click(function() {
      $(this).toggleClass( "class1", "class2" );
});
如果您试图切换某些内容的可见性/可用性，我建议您创建两个不同的类

1用于正常列表/列表项，例如类别=正常 2用于删除/禁用列表/列表项

e、 g单击前的列表项如下

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

在css中，删除的类将覆盖普通列表项的文本颜色和可见性设置

当您想要重新启用该项时，您所要做的就是删除已删除的类

$.someitem.removeClassremoved

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

$(this).is(':checked')
我个人并不喜欢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');
  }
}如果没有看到您的HTML，我会说这可能就是您要找的。如果您向我提供您的html，我可以帮助您更有效地定位它。现在需要注意的是，您可能正在将样式应用于您可能不打算使用的列表项

$('#list input[type="checkbox]').click(function () {
    if (!$(this).value()) {
        $(this).css("color", "black");
        $(".remove").css("background-color", "white");
    }
});
首先，您最好切换表示元素可以处于的状态的类，并且只在CSS中保留颜色和背景。您是否也可以包含一些HTML，这将有助于其他人回答您的问题。我理解这个概念，请提供一些HTML或JSFIDLE，谢谢