javascript - 如何通过不同的点击同时更改多个 CSS?

标签 javascript html css

如您所见,当您单击第一个亚马逊图标时,按钮上的框被选中。如何突出显示未同时突出显示的框。因此,例如,如果您单击第一个按钮,则会选择 1、3 和 5。我如何让这些突出显示,然后单击第二个亚马逊并突出显示/或更改框编号 2 的 CSS,以便将 1、2、3 和 5 更改为橙色?

    $("input[type=image]").on ("click", function() {
    $("p.the-text").removeClass("colorized");
    var cat = $(this).attr("data-cat");
    $("p.the-text." + cat).addClass("colorized");
    })
    p.the-text, p.the-text1, p.the-text2, p.the-text3, p.the-text4, p.the-text5,p.the-text6, p.the-text7, p.the-text8, p.the-text9, p.the-text10, p.the-text11, p.the-text12, p.the-text13, p.the-text14, p.the-text15, p.the-text16,p.the-text17, p.the-text18, p.the-text19  {border-color: #CACACA;padding:10px;color:#CACACA;font-weight:bold;background-color:white;font-family:"ff-din-web-condensed", sans-serif;border-style: solid;border-width: 1px;}

    p.the-text.colorized, p.the-text2.colorzied, p.the-text3.colorzied, p.the-text4.colorzied, p.the-text5.colorzied, p.the-text6.colorzied, p.the-text7.colorzied, p.the-text8.colorzied, p.the-text9.colorzied, p.the-text10.colorzied, p.the-text11.colorzied, p.the-text12.colorzied, p.the-text13.colorzied, p.the-text14.colorzied, p.the-text15.colorzied, p.the-text16.colorzied, p.the-text17.colorzied, p.the-text18.colorzied, p.the-text19.colorzied {color: white;background-color:orange;border-color:orange;font-family:"ff-din-web-condensed", sans-serif;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <input type="image" data-cat="cat1" id="theButton0" src="https://cdn0.vox-cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" style="height:50px" />

    <input type="image" data-cat="cat2" id="theButton1" src="https://cdn0.vox-cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" style="height:50px" />

    <input type="image" data-cat="cat3" id="theButton2" src="https://cdn0.vox-cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" style="height:50px" />

    <input type="image" id="theButton3" src="https://cdn0.vox-cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" style="height:50px" />

    <input type="image" id="theButton4" src="https://cdn0.vox-cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" style="height:50px" />

    <input type="image" id="theButton5" src="https://cdn0.vox-cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" style="height:50px" />

    <input type="image" id="theButto6n" src="https://cdn0.vox-cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" style="height:50px" />

    <input type="image" id="theButton7" src="https://cdn0.vox-cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" style="height:50px" />

    <input type="image" id="theButton8" src="https://cdn0.vox-cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" style="height:50px" />

    <input type="image" id="theButton9" src="https://cdn0.vox-cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" style="height:50x" />

 
    <p class="the-text cat1">1</p>
    <p class="the-text cat2">2</p>
    <p class="the-text cat1">3</p>
    <p class="the-text cat2">4</p>
    <p class="the-text cat1 cat2 cat3">5</p>
    <p class="the-text cat3">6</p>
    <p class="the-text">7</p>
    <p class="the-text">8</p>
    <p class="the-text1">9</p>
    <p class="the-text">10</p>
    <p class="the-text">11</p>
    <p class="the-text1">12</p>
    <p class="the-text">13</p>
    <p class="the-text">14</p>
    <p class="the-text1">15</p>
    <p class="the-text">16</p>
    <p class="the-text">17</p>
    <p class="the-text1">18</p>
    <p class="the-text1">19</p>
    </html>

jsfiddle

最佳答案

如果我没有理解错的话,我认为你只是多了一条你不需要的线。试试这个:

<script>
  $("input[type=image]").on ("click", function() {
    var cat = $(this).attr("data-cat");
    $("p.the-text." + cat).toggleClass("colorized");
  })
</script>

这一行:

$("p.the-text").removeClass("colorized");

取消突出显示所有框,然后您立即重新突出显示 2、4 和 5,因为它们具有“cat2”类。

编辑:使用 toggleClass() 而不是 addClass() 使再次单击按钮时该行不突出显示。

关于javascript - 如何通过不同的点击同时更改多个 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43690637/

相关文章:

html - 如果 wget 中使用了 --html-extension,那么 --no-clobber 仍然会覆盖文件吗?

html - 样式 Bootstrap 4 自定义复选框

html - Box Shadow 在 Internet Explorer 8 中不起作用?

javascript - 无法访问从 html javascript 上的 python render_template (jinja2/webapp2) 传递的参数

javascript - 第一次迭代后禁用 window.ondeviceorientation

javascript - 无法验证所有嵌套子元素的长度

html - 下拉菜单堆叠

javascript - 将 toString 方法暴露给 nashorn 中的 js 对象

html - Reactjs:如何将 HTML 放入列表项的 primaryText 中?

css - 我的灯箱插件全屏闪烁?