Question

正如您所看到的，当您单击第一个亚马逊图标时，按钮上的框被选中。如何突出显示未同时突出显示的框。因此，例如，如果单击第一个按钮1,3，则选择5。我如何保持突出显示，然后点击第二个亚马逊并突出显示/或更改框号2的CSS，以便1,2,3和5更改为橙色？

＆＃13;

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

＆＃13;

    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;}

＆＃13;

<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>

＆＃13;

jsfiddle

Answer 1

如果我理解正确的话，我认为你只需要一条额外的线路就可以了。试试这个：

<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（），在再次单击按钮时使行不会突出显示。

如何通过不同的点击同时更改多个CSS？

1 个答案: