Question

我有以下html结构：

<ul class="list-inline recommended-logo">
    <li><i id="icon-changer" class="First class"></i><span>First class</span></li>
    <li><i id="icon-changer" class="Second class"></i><span>Second class</span></li>
    <li><i id="icon-changer" class="Third, class"></i><span>Third, class</span</li>
    <li><i id="icon-changer" class="Four class"></i><span>Four class</span></li>
</ul>

如果存在任何此类，如果存在，那么我如何检查jQuery然后用不同的文本类替换。在同一页面可以超过3个类。

我尝试创建这样的东西，但仅适用于头等舱：

if (jQuery("#icon-changer").hasClass("First class")) {
    jQuery('#icon-changer').removeClass(First class').addClass('icon-first');
}
if (jQuery("#icon-changer").hasClass("Second class")) {
    jQuery('#icon-changer').removeClass('Second class').addClass('icon-second');
}

这是我的html生成方式：

   foreach($targetValues as $_target) :?>
     <ul class="list-inline recommended-logo">

     <li><i id="icon-changer" class="<?php echo $_target ?>"></i><span><?php echo $_target ?></span></li>
     </ul>
    <?php endforeach;

Answer 1

UPDATE :: 你可以试试equivelant：

<ul class="list-inline recommended-logo">
    <li><i id="icon-changer" class="First class"></i><span>First class</span></li>
    <li><i id="icon-changer" class="Second class"></i><span>Second class</span></li>
    <li><i id="icon-changer" class="Third class"></i><span>Third, class</span></li>
    <li><i id="icon-changer" class="Fourth class"></i><span>Four class</span></li>
</ul>

<script>
   var arr = [{class:'First.class',id:'first'},{class:'Second.class',id:'second'},{class:'Third.class',id:'third'},{class:'Fourth.class',id:'fourth'}]
   for(var i=0;i<arr.length;++i){
    $(`.${arr[i].class}`).parent().find('span').text(`${arr[i].id}`)
//Or if what you need is to change the class name to the name of the id
//$(`.${arr[i].class}`).removeClass().toggleClass(`icon-${arr[i].id}`)
   }
</script>

Answer 2

首先，确保您的类名没有空格。 class="a b"中的空格实际上意味着2个单独的类，a和b，而不是“a b”类。正如其他人所提到的，ID应该是唯一的。所以使用代码：

<ul class="list-inline recommended-logo">
    <li><i id="icon-changer-1" class="first_class"></i><span>First class</span></li>
    <li><i id="icon-changer-2" class="second_class"></i><span>Second class</span></li>
    <li><i id="icon-changer-3" class="third_class"></i><span>Third, class</span</li>
   <li><i id="icon-changer-4" class="fourth_class"></i><span>Four class</span></li>
</ul>

您可以按类选择（使用。）并轻松替换：

$('.first_class').removeClass('first_class').addClass('fifth_class')

将使用类“first_class”获取所有内容并将其替换为“fifth_class”。

我支持上面列出的原始代码。但是看看问题的编辑，问题显然是在重复ID时使用jQuery来选择ID - 第一个是忽略 ID并根据类选择 - 即使用{{每个removeClass / addClass函数调用都有1}} $('.First')等。如果ID不是唯一的，$（'＃...'）将无法按预期工作。

Jquery检查我标记是否有一个类并替换它

2 个答案: