Question

所以我有一张桌子。第一列是用户可编辑的文字（ID #idea01），后两列有一个按钮，每个按钮都有自己的个人ID（#happy01＆amp; #unwanted01）：

<!DOCTYPE html>
<body>
    <p>Step 1: Write a list</p>
        <table border="0">
            <tr>
                <td id="idea01" contenteditable="true">&#149; [delete this and enter your idea]</td>
                <td><button id="happy01">happy to do this for life</button></td>
                <td><button id="unwanted01">unwanted dependency</button></td>
            </tr>
        </table>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/script.js"></script>
    </body>
</html>

想法是用户可以编辑第一列文本，然后单击任一按钮，CSS将向他们显示哪些想法是＆＃34; .happy＆＃34;哪些想法是＆＃34;。不需要的＆＃34;。

CSS类格式很简单，只适用于文本：

.happy { color: green; font-weight: bold;}
.unwanted { color: red; text-decoration: line-through;}

我的问题： 如何使用jQuery，点击按钮#happy01，.happy类被添加到ID为#idea01的道明中？或者，点击按钮#unwanted01后，.unwanted课程会添加到道明#idea01？

我认为这样可行，但点击该按钮无效：

$("#happy01").click(function(){
  $("#idea01").addClass("happy");
});

$("#unwanted01").click(function(){
  $("#idea01").addClass("unwanted");
});

感谢您的帮助！

Answer 1

您的代码是正确的，只需删除另一个类。

$("#happy01").click(function(){
  $("#idea01").addClass("happy");
  $("#idea01").removeClass("unwanted");
});

$("#unwanted01").click(function(){
  $("#idea01").addClass("unwanted");
  $("#idea01").removeClass("happy");
});

将按钮设置为按ID＃添加文本类？

1 个答案: