Question

我需要一些帮助以及一些JQUery代码，尝试谷歌搜索但没有找到任何东西加上我不知道究竟要google什么！（可能是我引用的行可能是一些JQuery扩展名。）

JSP

<div id="sugar-opts">

    <div class="howmanysugars">
    <label>How many <span id="sugar-label">sugars</span>?
    :



    <div class="numSugarsDiv">

        <input type="text" name="num-sugars" id="num-sugars" placeholder="?" value="1" />

        <button class="btn minus">-</button>
        <button class="btn plus">+</button>
    </div>

    :

    <div>
        <label class="clearfix sugarLabel" >Include sugar? </label>

        <label><input type="radio" name="include-sugar" value="yes" /> Yes</label>
        <label><input type="radio" name="include-sugar" value="no" /> No</label>
    </div>

的Javascript

$sugarOptsContainer = $('#sugar-opts');


Event handler:
$('input[name=include-sugar]', $sugarOptsContainer)     // first part refers to <input element,
                                                        // but what is the purpose of: , $sugarOptsContainer

.data('root', $('> :last-child', $sugarOptsContainer))  // this defines jquery object 'root' but what is the meaning
                                                        // of  > :last-child, and again purpose of , $sugarOptsContainer
.on('change', handleSugarChange);                       // defines function called on onChange event





function handleSugarChange(event) {

    var $root = $(this).data('root');                // this refer to 'root' defined above

    if ($('.radio.selected', $root).length) {        // checks if radio is selected, but why $root, and 
                                                     // what is purpose of .length here? 

    $root.removeClass('error');
        formData.sugar = this.value;
    return;

    } else {

    $root.addClass('error');

    }

    displayMessage();
}

Answer 1

在此：

$sugarOptsContainer = $('#sugar-opts');
$('input[name=include-sugar]', $sugarOptsContainer)

$sugarOptsContainer是一个搜索的上下文，因此它只在该层次结构中查找那些类型的输入标记。它基本上与：

相同

$('#sugar-opts').find('input[name=include-sugar]');

在此：

$('> :last-child', $sugarOptsContainer)

这是找到$sugarOptsContainer的每个孩子的最后一个孩子。 >找到所有孩子，然后:last-child找到每个孩子的最后一个孩子。

与上一个示例一样，我更喜欢将其写为：

$sugarOptsContainer.find('> :last-child');

在此：

if ($('.radio.selected', $root).length)

.length检查是否检查jQuery对象中是否有任何项目。如果jQuery对象为空，.length将为零，if检查将失败。如果jQuery对象不为空，则.length将为非零，并且将满足if条件。所以，就像这样：

// if there are any select items
if ($('.radio.selected', $root).length)

Answer 2

$('input[name=include-sugar]', $sugarOptsContainer)

这与（并且，就个人而言，我更喜欢以下内容）

相同

$sugarOptsContainer.find('input[name=include-sugar]')

再次

$('> :last-child', $sugarOptsContainer) // is the same as
$sugarOptsContainer.find('> :last-child')

和

if ($('.radio.selected', $root).length) {

是

if (!!$root.find('.radio.selected').length)

在那里，我（不必要地）使用.length将!!强制转换为布尔值。基本上，它只是检查是否匹配'.radio.selected'。 if语句无论如何都会将测试表达式强制转换为布尔值，因此!!是不必要的。

Answer 3

$sugarOptsContainer = $('#sugar-opts');

这用于选择一个名为sugar-opts的元素并将结果保存在名为$ sugarOptsContainer的变量中

$('input[name=include-sugar]', $sugarOptsContainer)

这里$（children，Parent）得到名为include-sugar的输入，其中$ sugarOptsContainer是id为sugar-opts的元素

.data('root', $('> :last-child', $sugarOptsContainer))

当您执行类似操作时，将使用

.data选择数据属性中的值

:last-child

例如，如果你有超过tr的表

<table> 
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

：last将为您选择最后一个tr，并且：首先将为您选择该表的第一个子项但是这里

$('> :last-child', $sugarOptsContainer)

它将选择$ sugarOptsContainer中的最后一个子项

.on('change', handleSugarChange);

.on用于将事件绑定到该元素.on（Eventname，将处理该事件的操作）当此输入更改时，它将调用函数handleSugarChange

在函数内部

var $root = $(this).data('root');

这是用于导致调用此函数的输入

.data('root');

如前所述，为该元素选择属性命名数据，该元素是触发更改的输入。

$('.radio.selected', $root).length

当选择单选按钮时，我认为选择的类将被添加到此输入中，然后当你说.radio.selected意味着获取选择哪个在$ root中的无线电作为上面的参考$（children，parent ）如果这是2级的任何输入，则长度不会为0，如果没有输入匹配则输入，否则将进入其他

$root.addClass('error');

addClass和removeClass是jquery函数，用于在元素中添加和删除类。

我希望我在这部分解释所有相关的jQuery。

理解一些JQuery语法

3 个答案: