Question

更新 - 最终解决方案

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

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

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

// Add stuff

});
})(jQuery);

这似乎要等到PHP完成它然后才开火。我可以在DevTools面板中看到这些变化。

我也没有意识到Wordpress似乎真的不喜欢$而宁愿拥有jQuery，所以不得不创建$ = jQuery变量来对付它。

再一次，谢谢大家。我刚刚开始学习jQuery和Javascript，这是一个很好的教训。

原始问题

我正在尝试将类添加到选择框选项，具体取决于WooCommerce给出的类。（这样做的原因是我放弃了试图指出我无法工作的“禁用”属性。）

由于某种原因，我使用的代码不是添加任何类。

＆＃13;

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');
        }
    }

});

＆＃13;

<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>

＆＃13;

非常感谢任何帮助。

此致迈克尔

修改大家好，

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

我唯一的结论必须是Javascript / jQuery没有看到该课程已启用＆＃39;即使它是绝对附加的。

在PHP完成处理之前，脚本是否正在运行？这是一个动态加载的选择框。

干杯

Answer 1

内部for循环this未引用它可能是window对象或其他内容的元素。 Yo可以使用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 loop

$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>

Answer 2

您必须从

更改代码块

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

到

$opts.each(function(){
    if($(this).hasClass('enabled'))
    {
        $(this).addClass('woo');
    }
    else
    {
        $(this).addClass('foo');
    }
})

另一种做法是：

$('option.enabled').addClass('woo');      
$opts.not('.enabled').addClass('foo');

Answer 3

如果您需要替代方案，则可以使用foreach

$opts.each(function(){
        if(($(this)).hasClass('enabled')){
            $(this).addClass('woo');
        }
        else {
            $(this).addClass('foo');
        }
    })

Answer 4

请尝试使用此方法。

$sels.find('option').each(function() {
 if($(this).hasClass('enabled')) {
  $(this).addClass('woo');
 } else {
  $(this).addClass('foo');
 }
});

Answer 5

在for for循环this中，没有给出循环中的当前元素。您需要使用$($opt[$i]).hasClass()才能在选择框中访问您的选项。

＆＃13;

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[$i]).hasClass('enabled')){
         $($opts[$i]).addClass('woo');
    }
    else {
        $($opts[$i]).addClass('foo');
    }
}
    

});

＆＃13;

<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>

＆＃13;

.addClass（）在（）jQuery中没有工作

5 个答案: