javascript - .addClass() 在 for() jQuery 中不起作用

Question

更新 - 最终解决方案

感谢所有帮助我解决这个问题的人。 特别感谢@Pranav 通过电子邮件提供的所有帮助。您的所有答案似乎都适用于 JSFiddle，但我无法在本地服务器上复制它。

我的问题是我的 js 文件在 PHP 完成动态添加元素和类之前触发。我能够通过调用解决这个问题(不使用事件处理程序):

( function() {
    jQuery(window).load( function($) {

// Add stuff

});
})(jQuery);

这似乎要等到 PHP 完成它的工作然后启动。我可以在 DevTools 面板中看到发生的变化。

我也没有意识到 Wordpress 似乎真的不喜欢 $ 而宁愿使用 jQuery，所以不得不创建 $ = jQuery 变量来解决这个问题。

再次感谢大家。我才刚刚开始学习 jQuery 和 Javascript，这是一个很好的学习类(class)。

---

原始问题

我正在尝试根据 WooCommerce 提供的类别向选择框选项添加类别。 (这样做的原因是我放弃了尝试指向我无法工作的“禁用”属性。)

出于某种原因，我使用的代码没有添加任何类。

jQuery(document).ready( function($) {

    // Classes for the link and the visible dropdown
    $selectclass='turnintodropdown'; 	// class to identify selects
    $listclass='turnintoselect';		// class to identify ULs
    $boxclass='dropcontainer'; 		// parent element
    $triggeron='activetrigger'; 		// class for the active trigger link
    $triggeroff='trigger';			// class for the inactive trigger link
    $dropdownclosed='dropdownhidden'; // closed dropdown
    $dropdownopen='dropdownvisible';	// open dropdown

    $i=0;
    $count=0;
    $sels=$('select');
    $opts=$('option');
    $trigger=('<a href="#"></a>');
    function $switchTriggerClass (){
        $($trigger).toggleClass($triggeron).toggleClass($triggeroff);
    }

    for($i; $i<$opts.length; $i++){
        if($($opts).hasClass('enabled')){
            $(this).addClass('woo');
        }
        else {
            $(this).addClass('foo');
        }
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tbody>
    <tr>
        <td class="label">
            <label for="size">Size</label>
        </td>
        <td class="value">
            <select id="size" class="turnintodropdown" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
            <option value="">- -</option>
            <option value="10" class="attached enabled">10</option>
            <option value="20" class="attached enabled">20</option>
            <option value="30" class="attached enabled">30</option>
            <option value="40" class="attached enabled">40</option>
            <option value="50" class="attached" disabled="">50</option>
            <option value="60" class="attached" disabled="">60</option>
            </select>
            <a class="reset_variations" href="#" style="visibility: hidden;"></a>
        </td>
    </tr>
</tbody>

如有任何帮助，我们将不胜感激。

问候迈克尔

编辑大家好，

我已经尝试了所有这些方法，结果是“foo”被输出到所有选项元素。我还在我的导航菜单上尝试了这些方法，并且 li 元素正在响应我希望这段代码运行的方式。

我唯一的结论是 Javascript/jQuery 没有看到类“已启用”，即使它肯定是附加的。

会不会是脚本在 PHP 完成处理之前就已经运行了？这是一个动态加载的选择框。

干杯

Answer 1

for 循环内部 this 不是指元素，它可能是 window 对象或其他东西。你可以使用 eq() 解决问题方法。

for(; $i < $opts.length; $i++){
    // cache the element reference
    var $item = $opts.eq($i);
    // or $($opts[$i])

    if($item .hasClass('enabled')){
        $item .addClass('woo');
    }
    else {
        $item .addClass('foo');
    }
}

var $opts = $('option');

for (var $i = 0; $i < $opts.length; $i++) {
  // cache the element reference
  var $item = $opts.eq($i);
  // or $($opts[$i])

  if ($item.hasClass('enabled')) {
    $item.addClass('woo');
  } else {
    $item.addClass('foo');
  }
}

.foo {
  color: red
}

.woo {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="size" class="turnintodropdown" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
            <option value="">- -</option>
            <option value="10" class="attached enabled">10</option>
            <option value="20" class="attached enabled">20</option>
            <option value="30" class="attached enabled">30</option>
            <option value="40" class="attached enabled">40</option>
            <option value="50" class="attached" disabled="">50</option>
            <option value="60" class="attached" disabled="">60</option>
            </select>

或使用 each()方法而不是 for 循环

$opts.each(function(){
    // cache the element reference
    $item = $(this);

    if($item .hasClass('enabled')){
        $item .addClass('woo');
    }
    else {
        $item .addClass('foo');
    }
});

var $opts = $('option');


$opts.each(function() {
  // cache the element reference
  $item = $(this);

  if ($item.hasClass('enabled')) {
    $item.addClass('woo');
  } else {
    $item.addClass('foo');
  }
});

.foo {
  color: red
}

.woo {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="size" class="turnintodropdown" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
            <option value="">- -</option>
            <option value="10" class="attached enabled">10</option>
            <option value="20" class="attached enabled">20</option>
            <option value="30" class="attached enabled">30</option>
            <option value="40" class="attached enabled">40</option>
            <option value="50" class="attached" disabled="">50</option>
            <option value="60" class="attached" disabled="">60</option>
            </select>

---

即使您可以使用 filter() 分两行完成和 not()方法。

// filter all elements with the class and add the class
$opts.filter('.enabled').addClass('woo');      

// filter all elements which doesn't have the class and add the class
$opts.not('.enabled').addClass('foo');

var $opts = $('option');

// filter all elements with the class and add the class
$opts.filter('.enabled').addClass('woo');

// filter all elements which doesn't have the class and add the class
$opts.not('.enabled').addClass('foo');

.foo {
  color: red
}

.woo {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="size" class="turnintodropdown" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
            <option value="">- -</option>
            <option value="10" class="attached enabled">10</option>
            <option value="20" class="attached enabled">20</option>
            <option value="30" class="attached enabled">30</option>
            <option value="40" class="attached enabled">40</option>
            <option value="50" class="attached" disabled="">50</option>
            <option value="60" class="attached" disabled="">60</option>
            </select>

与使用 end() 的单行相同方法。

$opts
   .filter('.enabled').addClass('woo')
   // back to the previous element object
   .end()
   .not('.enabled').addClass('foo');

var $opts = $('option');

// filter all elements with the class and add the class
$opts.filter('.enabled').addClass('woo')
  .end()
  .not('.enabled').addClass('foo');

.foo {
  color: red
}

.woo {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="size" class="turnintodropdown" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
            <option value="">- -</option>
            <option value="10" class="attached enabled">10</option>
            <option value="20" class="attached enabled">20</option>
            <option value="30" class="attached enabled">30</option>
            <option value="40" class="attached enabled">40</option>
            <option value="50" class="attached" disabled="">50</option>
            <option value="60" class="attached" disabled="">60</option>
            </select>