在onclick事件中设置CSS属性

Question

我在popover中设置单个元素（通过id）的fontStyle属性出现了问题。我接收到onClick事件，将样式（加粗字体风格）应用于所有类元素，然后尝试将另一个样式（普通样式）应用于一个（被点击的）元素。我的代码如下：

$(document).on('click', '.listElement', function () {
    $('.listElement').css('font-weight', 'bold');
    alert(this.id);
    $(this).css('font-weight', 'normal');
});

这里有一个演示

设置所有 class 元素的 bold 样式是有效的，对话框也显示了正确的 id，所以这是正确的元素（在 this 中），但 .css() 方法不起作用。我尝试使用 id 来设置样式，例如：

$('#A').css('font-weight', 'normal');

控制台没有错误提示，但仍然无法工作。是否有其他方法可以将字体样式设置为单个唯一元素？

- barmi

---

你的代码实际上是可以工作的。但是当弹出窗口在点击内部或外部关闭并重新打开时，插件会重新初始化字体到初始状态。 - Dan Philip Bejoy

@DanPhilip 我不确定，但可能你是错的，因为没有初始状态。在页面加载时，所有元素的字体样式都是“normal”，在第一次点击（任何元素）后，所有元素的字体样式都是“bold”。 - barmi

问题在于，每次单击链接时都会重定向到您的页面，并且完整的代码从头开始运行。如果要保存单击状态，则必须将其存储在sessionStorage中，并在脚本开始时请求。尝试在没有链接的情况下进行操作，您会发现CSS有效。另一个选择是编写一个具有MVC的单侧应用程序，并侦听hashChange事件。（我正在为此撰写教程） - TypedSource

@TypedSource，那么为什么通过类设置元素的字体样式有效呢？ - barmi

@barmi 因为你没有重新加载页面。 - TypedSource

Answer 1

不要移除CSS样式，为何不在点击的对象上从未添加它？获取所点击对象的ID并使用它...

$(document).on('click', '.listElement', function () {
var clickEl = this.id; //ID of clicked object
$('.listElement').not('#' + clickEl).css('font-weight', 'bold'); //bolds everything which is NOT the clicked item.
alert(this.id);
});

或者

$(document).on('click', '.listElement', function () {
$('.listElement').not('#' + this.id).css('font-weight', 'bold'); //bolds everything which is NOT the clicked item.
alert(this.id);
});

更新的Fiddle

---

如果你有特定的原因需要移除样式而不是永远不应用它...

$(document).on('click', '.listElement', function () {
$('.listElement').css('font-weight', 'bold');
alert(this.id);
$('.listElement#' + this.id).css('font-weight', 'normal');
});

这是示例代码

- Scott