jQuery切换ID而不是类？

Question

有没有一种方法可以创建一个切换函数，首先只切换一个CSS样式元素，例如背景颜色或类似的东西。而且选择的是ID而不是类，因为我知道toggleClass，但我想知道是否可以使用ID来实现？

$("#gallery").load('http://localhost/index.php/site/gallerys_avalible/ #gallerys_avalible'); 
  $('li').live('click', function(e) {  
      e.preventDefault();
      if(!clickCount >=1) {
        $(this).css("background-color","#CC0000");
        clickCount++; 
        }  
       console.log("I have been clicked!");
       return false;
       });

- AlexW.H.B.

---

它很容易创建，但不够智能。ID被用于唯一标识单个元素。更改它们真的很困惑。 - GolezTrol

我不太清楚你的问题。你想切换指定id的对象的背景颜色吗？还是你想切换元素的实际id？通常切换id是错误的做法，因此也许你可以描述一下你真正想要实现的目标，我们可以帮助你找到更好的方法来实现。 - jfriend00

切换元素的背景颜色。 - AlexW.H.B.

Answer 1

你真的应该使用类来实现。ID在页面内是唯一的，应该用作捕获事件的点（通过$.live()或其他使用事件委托的方法）。此外，如果你认为使用ID是因为它们在CSS规则中具有更高的特异性，那么你走错了路。

简而言之，不好的想法，坚持使用切换类。

- tereško

Answer 2

编辑:

阅读原作者的评论后，我认为他正在寻找一种在单击链接时突出显示“活动”链接的方法。teresko绝对是正确的，您应该切换类而不是ID。

以下是您可能正在寻找的jQuery代码片段的精髓:

$("li").bind('click', function(){
   // remove the active class if it's there
   if($("li.active").length) $("li.active").removeClass('active');
   // add teh active class to the clicked element
   $(this).addClass('active');
}); 

演示

---

查看jQuery toggle api。

这有点令人困惑，因为在jQuery toggle上进行简单的谷歌搜索会带您进入显示/隐藏切换文档。但是，.toggle()可用于交替函数-甚至可以添加两个以上。

像这样...

$("el").toggle(
       function(){
          $(this).css('background-color', 'red');
       },
       function(){
           $(this).css('background-color, ''); // sets the bg-color to nothing
       });

- Derek Adair

---

虽然这样做很好，但你真的应该将 CSS 留给 *.css 文件的内容。这就是为什么你应该使用类来进行切换的原因。 - tereško

谢谢这个函数，但是我有一个问题：为什么需要点击两次才能使元素变成红色？另外，我正在尝试找出一种方法，使得多个<li>项目中只有一个可以同时拥有这个红色背景，你有任何想法吗？非常感谢您的帮助。 :) - AlexW.H.B.

@teresko - 这只是演示切换功能，而不是编辑CSS的标准。本质上，我是在借鉴用户的演示以尽量减少混淆。 - Derek Adair

Answer 3

jQuery没有toggleId()函数。但是你可以创建自己的id toggle函数。

function toggleId(className,id)
{
    var tag = document.querySelector('.'+className);
    tag.id = tag.getAttribute("id") ? '' : id;
}

toggleId("myClass","id");

这将切换myClass元素的id（id和NULL）。

另一个切换两个id的例子

假设您想在元素的两个id（id1和id2）之间进行切换，则

function toggleId(className,id1,id2)
   {
       var tag = document.querySelector('.'+className);
       tag.id = tag.getAttribute("id") ? id2 : id1;
   }

toggleId("myClass","id1","id2");

- Jishan mondal

Answer 4

$("click-element").bind('click', function(){

$(“click-element”).绑定(‘点击’, 函数(){

if($("your-element").is('#yourIdValue')){

$('your-element').removeAttr('id');

}否则{

$('your-element').attr('id', 'yourIdValue');

}

});

});

- Pavan Kumar

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Oro