Question

因此，基本上，我有一堆导航按钮，我想在用户单击按钮时更改其名称。

原始的div类名称类似于“ home”，当用户单击它时，我希望它为“ home_active”，以便CSS属性将更改背景图像。

$('.click').click(function() {
  var clicked_url = $(this).attr('class');
  var updated_url = clicked_url + "_active";
  $(this).attr('class') = updated_url;
});

.item_active {
  background-color: teal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="item">item 1</a>
<a href="#" class="item">item 2</a>
<a href="#" class="item">item 3</a>

Answer 1

您应使用.addClass()方法将一个类添加到元素：

$('.click').click(function() {
    var clicked_url = $(this).attr('class');
    var updated_url = clicked_url + "_active";
    $(this).removeClass(clicked_url); // remove the old class
    $(this).addClass(updated_url); // add the new class
});

但是，作为一种好的做法，最好在现有类中添加一个修饰类，例如“ active”，并保留原始类名。

然后使用以下CSS：

.click.active {
    background: red;
}

JS代码如下：

$('.click').click(function() {
    $('.click.active').removeClass('active'); // remove active class from all other nav items
    $(this).addClass('active'); // add active to the nav item the users just clicked on
});

Answer 2

使用Jquery函数：

$(this).hasClass("className");
$(this).addClass("className");
$(this).removeClass("className");

Answer 3

$('.click').click(function() {
var clicked_url = $(this).attr('class');
var updated_url = clicked_url + "_active";
$(this).removeClass(updated_url)
$(this).addClass(updated_url)});

Answer 4

几乎在那里-但请记住使用attr重设类值。而且您很可能想从其他_active个元素中删除 .click，所以这是唯一一个。

$(".click").click(function() {
  $(".click").each(function() {
    $(this).attr("class", $(this).attr("class").replace(/_active/, ""));
  });
  $(this).attr("class", $(this).attr("class") + "_active");
});

Answer 5

不确定类.click在哪里，但是有.item并且.click(...)方法还可以-我更喜欢使用.on('click', ...)（请参阅{{3}之间的区别） }和.click()）。

$('.item').on('click', function() {...

由于目标是通过更改其类来简单地更改单击链接的样式，因此最好分配一个公共类（已完成：.item）和一个设置状态的类（一个单独的类： .active）。

$(this).toggleClass('active');

如果您希望将其应用于其他标签，只需修改外部选择器

$('.item, :button').on('click', function() {...

上方的选择器将监听所有.item和<button>标签为<input type='button'> 和的内容的点击。

目前尚不清楚所需的行为，因此有两个演示：

演示1：单击任意链接以添加/删除.active类

或

演示2：单击任何链接以添加/删除.active类排他

演示1

点击任意链接以添加/删除.active类

$('.item').on('click', function() {
  $(this).toggleClass('active');
});

.active {
  background-color: teal;
  color: white
}

<a href="#" class="item">item 1</a>
<a href="#" class="item">item 2</a>
<a href="#" class="item">item 3</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

演示2

点击任意链接以添加/删除{em>

.active

$('.item').on('click', function() {
  $(this).toggleClass('active');
  $('.item').not(this).removeClass('active');
});

.active {
  background-color: teal;
  color: white
}

Answer 6

耦合事物。首先，您要选择类名称为“ item”而不是“ click”的元素。其次，您在错误使用attr()函数。您希望将var设置为第二个参数，而不是attr('class') = var，例如attr('class', var)。

编辑：最后，您应该在点击事件中检查链接是否曾经被单击过（即，链接是否已经具有“ _active”后缀）：

$('.item').click(function() {
    var clicked_url = $(this).attr('class');
    var updated_url;
    if(clicked_url.includes("_active")){
        updated_url = "item";
    }else{
       updated_url = "item_active";
    }
    $(this).attr('class', updated_url);
});

.item_active {
  background-color: teal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="item">item 1</a>
<a href="#" class="item">item 2</a>
<a href="#" class="item">item 3</a>

单击时编辑div类名称

6 个答案:

演示1

演示2