从jquery中的属性开始，在遍历dom的系列中更改单个on/off开关的状态

我对jQuery中的一系列开/关开关有一个问题

这是开关的标记：

<div class="switchOnOff">
    <div class="switchLed"></div>
    <p class="switchFeedback"></p>
    <a class="switchButton" rel="on" id="one"><span></span></a>
</div>

<div class="switchOnOff">
    <div class="switchLed"></div>
    <p class="switchFeedback"></p>
    <a class="switchButton" rel="on" id="two"><span></span></a>
</div>

但是这个代码不起作用。我也尝试了“下一个”、“上一个”或“最近的”选择器，但DOM遍历不起作用。 总之，我希望获得一个可以改变单个开关状态的开/关功能

我希望我是清楚的

我们衷心感谢您的帮助。

您可以这样做（在评论后更新）

在这里拉小提琴

编辑最后一条评论：要设置“第一次通过”，您可以执行以下操作：

var switcher = function(el) {
    var div = $(el).closest('.switchOnOff');
    var $this = $(el);
    if ($this.attr('rel') == 'off') {
        $this.attr('rel', 'on');
        div.find('switchLed').addClass("on").removeClass("off");
        div.find('.switchFeedback').html("on");
    } else if ($this.attr('rel') == 'on') {
        $this.attr('rel', 'off');
        div.find('switchLed').addClass("off").removeClass("on");
        div.find('.switchFeedback').html("off");

    }
};
//Set up the various div
$('.switchOnOff .switchButton').each(function() {
    switcher(this);
});
//attach the handler
$('.switchOnOff .switchButton').click(function() {
    switcher(this);
});

---

在这里摆弄：

在单击事件中，没有一个选择器与被单击的实际项目相关。也就是说，如果单击第二个

.switchonOff.switchButton

，选择器很可能会找到第一个元素（最上面的元素）。（例如，

$（'.switchButton'）.attr（'rel'）

将始终从页面上的第一个元素提取，尽管事件是从第二个元素触发的）

要更正此问题，请确保将搜索与元素本身相关联。这可以通过提供范围参数来实现：

var feedbackOn = 'ON';

$('.switchOnOff .switchButton').click(function(){
  // here's your scope
  var $scope = $(this).closest('.switchOnOff'),
      rel = $(this).attr('rel');

  // now locate the elements you want from within scope:
  if (rel == 'off'){
    $(this).attr('rel','on');
    $scope.find('.switchLed').removeClass('off').addClass('on');
    $scope.find('.switchFeedback').html(feedbackOn);
  }else if (rel == 'on'){
    $(this).attr('rel','off');
    $scope.find('.switchLed').removeClass('on').addClass('off');
    $scope.find('.switchFeedback').html('OFF');
  }
  return false;
});

---

您可能还需要查看

.removeClass

，以删除应用于相反的on/off类。在不知道您的意图的情况下，我没有添加它，但我想如果需要，我会提到它。

您是否错过了

。切换的
类选择器的全站符？谢谢Orbling；你是对的，这是一个书写错误；我已经更新了，谢谢你。谢谢你，尼古拉，但这只是第一次；如果我想更改开/关开关上的选择，它将不起作用。谢谢Nicola，您的解决方案非常有效…只是一个问题：根据您的说法，将完全相同的函数包含在.click事件中但不包含在其中的最佳方式是什么？你知道，对于第一次访问页面…@bobighorus，你的意思是你需要在页面加载时设置所有内容？比如“第一次通过”？是的，当我加载页面时，我需要自动设置led和反馈消息（检查“rel”属性的值），即使我不再单击。所以这是相同的事情，但不在.click（）事件中，但我不想重复同样的事情两次，但我想抽象这个过程。谢谢Nicola，这是一个很好的直觉，但在第一次点击时它会以相反的方式工作……谢谢Brad，但即使是这个解决方案也只在我第一次点击时起作用；如果我想更改开/关开关的选择，它将不起作用。感谢“removeClass”的建议；我有效地使用了它，但我没有在摘要中报告它，因为我没有添加不相关的细节。p、 你忘了第一个“$（这个）”；）@波比格罗斯：是的，刚刚抓到了。显然，咖啡还没有开始。这一个确实有效，在JSFIDLE上有一个示例（代码下面的链接）。
var switcher = function(el) {
    var div = $(el).closest('.switchOnOff');
    var $this = $(el);
    if ($this.attr('rel') == 'off') {
        $this.attr('rel', 'on');
        div.find('switchLed').addClass("on").removeClass("off");
        div.find('.switchFeedback').html("on");
    } else if ($this.attr('rel') == 'on') {
        $this.attr('rel', 'off');
        div.find('switchLed').addClass("off").removeClass("on");
        div.find('.switchFeedback').html("off");

    }
};
//Set up the various div
$('.switchOnOff .switchButton').each(function() {
    switcher(this);
});
//attach the handler
$('.switchOnOff .switchButton').click(function() {
    switcher(this);
});

var feedbackOn = 'ON';

$('.switchOnOff .switchButton').click(function(){
  // here's your scope
  var $scope = $(this).closest('.switchOnOff'),
      rel = $(this).attr('rel');

  // now locate the elements you want from within scope:
  if (rel == 'off'){
    $(this).attr('rel','on');
    $scope.find('.switchLed').removeClass('off').addClass('on');
    $scope.find('.switchFeedback').html(feedbackOn);
  }else if (rel == 'on'){
    $(this).attr('rel','off');
    $scope.find('.switchLed').removeClass('on').addClass('off');
    $scope.find('.switchFeedback').html('OFF');
  }
  return false;
});