Question

这个jQuery的新东西。这是我们使用的软件吐出的代码，我无法更改代码。所以我必须使用jQuery来操作它到我想要的。

<div class="responseItem">

    <span class="response_text">yes</span>
    <div style="clear:both"></div>
</div>

<div class="responseItem">

    <span class="response_text">no</span>
    <div style="clear:both"></div>
</div>

当您选择一个选项时，它会添加一个名为selected的类，如下所示：

<div class="responseItem selected">

    <span class="response_text">yes</span>
    <div style="clear:both"></div>
</div>

我添加了jQuery来获取我想要的图标作为默认图标：

$("span.response_text").prepend('<i class="fa fa-circle-o">&nbsp;</i>');

因此，当您在浏览器中查看时，您的代码就像这样：

<div class="responseItem">
   <span class="response_text">
      <i class="fa fa-circle-o"> </i>
        yes
   </span>
   <div style="clear:both"></div>
</div>

它将为您提供一个完美的永久圆圈图标。我现在希望它根据是否选择更改图标。因此默认值为fa-circle-o，选中后将更改为fa-dot-circle-o

$("span.response_text").click(function(){
    $("i").removeClass("fa-circle-o").addClass("fa-dot-circle-o");
});

这种作品然后将两个图标更改为此，所以我有点到达但不确定.click是否是正确的方法？

一旦div类responseItem 选择事件发生，我基本上需要它来更改图标类。

任何帮助都将受到如此多的赞赏。

谢谢

Answer 1

如果我理解正确，页面上有多个带有<i>标记的项目。因此，我建议：

$("i.fa-circle-o").removeClass("fa-circle-o").addClass("fa-dot-circle-o");

这将确保它仅替换所选的＆＃39;项目

否则，您必须将$("i")选择器更改为更具体的内容，因为它会点击页面上的每个<i>。

这是一个JS小提琴，展示了一个更完整的解决方案：

http://jsfiddle.net/2otd1mh5/

$(document).ready(function () {
    $("span.response_text").prepend('<i class="fa fa-circle-o">&nbsp;</i>');
});

$("span.response_text").click(function(){
    var dotItems = $('i.fa-dot-circle-o');

    $(this).find('i').removeClass("fa-circle-o").addClass("fa-dot-circle-o");

    dotItems.removeClass("fa-dot-circle-o").addClass("fa-circle-o");
});

Answer 2

将类selected添加到div.responseItem后，请根据以下代码段手动引发自定义事件。

代码段：

$("div.responseItem").addClass("selected").trigger('classChanged');

定义classChanged这样的自定义div.selected事件，以更改您的图标课程。

$(document).on('classChanged',"div.selected", function() {
     $("i").removeClass("fa-circle-o").addClass("fa-dot-circle-o");
});

希望这能帮到你！

Jquery触发类更改

2 个答案: