JQuery - 使用逻辑条件更改类名答案

【问题标题】：JQuery - Change className with logic conditionsJQuery - 使用逻辑条件更改类名
【发布时间】：2022-01-26 09:06:25
【问题描述】：

我正在寻找根据另一个div的名称修改一个div的类名。我无法让它与 JQuery 一起使用。

这是html结构：

<div class="div-overlay">
    <a class="image" href="https://www.example.net/page-events/" target="_blank"></a>

    <div class="div-container">
        <ul class="post-categories">
            <li>
                <a href="https://www.example.net/category/events/" class="category-item">Events</a>
            </li>                                       
        </ul>
</div>
    
<div class="div-overlay">
    <a class="image" href="https://www.example.net/page-conferences/" target="_blank"></a>

    <div class="div-container">
        <ul class="post-categories">
            <li>
                <a href="https://www.example.net/category/conferences/" class="category-item">Conferences</a>
            </li>                                       
        </ul>
</div>

我的目标是修改：

class="div-overlay"

根据文本中的值：

class="category-item"

我的尝试没有成功：

$(document).ready(function(){
var category = $(".category-item").html();
var newEvents = $(".div-overlay").attr('newclass','events');
var newConferences = $(".div-overlay").attr('newclass','conferences');

if (category = "Events"){
   newEvents;
} else if (category = "Conferences") {
    newConferences;
};
});

我怎样才能使我的脚本工作？

详细信息：使用 elementor 在 Wordpress 上工作。

【问题讨论】：

标签： javascript html jquery variables

【解决方案1】：

你可以试试这个代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".category-item").each(function() {
        var cat_val = $(this).html();
        $(this).parents('.div-overlay').attr('newClass', cat_val);
    });
});
</script>
</head>
<body>

<div class="div-overlay">
    <a class="image" href="https://www.example.net/page-events/" target="_blank"></a>
    <div class="div-container">
        <ul class="post-categories">
            <li>
                <a href="https://www.example.net/category/events/" class="category-item">Events</a>
            </li>                                       
        </ul>
    </div>
</div>
    
<div class="div-overlay">
    <a class="image" href="https://www.example.net/page-conferences/" target="_blank"></a>
    <div class="div-container">
        <ul class="post-categories">
            <li>
                <a href="https://www.example.net/category/conferences/" class="category-item">Conferences</a>
            </li>                                       
        </ul>
    </div> 
</div>

</body>
</html>

【讨论】：

循环播放是个好主意......但是，两个“div-overlay”都获得了相同的新类：
你可以运行上面的代码sn -p & 可以检查每个div。两个 div 都使用类别值获取新属性。

【解决方案2】：

你应该使用addClass方法

$(document).ready(function(){
   var category = $(".category-item").html();
  
   if (category = "Events"){
      $(".div-overlay").addClass('events');
   } else if (category = "Conferences") {
      $(".div-overlay").addClass('conferences');
   };
});

【讨论】：

没有任何作用
您可能遗漏了其他内容。你能尝试设置一个可运行的代码吗？
这是我的问题...我不知道缺少什么！