-1

我需要一些帮助来理解一些 JQUery 代码，尝试过谷歌搜索，但没有找到任何东西，而且我不知道到底要谷歌什么！（可能我所指的行可能是一些 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();
}
4

3 回答 3

2

在这：

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

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

// if there are any select items
if ($('.radio.selected', $root).length)
于 2013-10-21T19:18:53.243 回答
0 
$('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无论如何，语句都会将测试表达式强制为布尔值，因此!!是不必要的。

于 2013-10-21T19:23:43.113 回答
0 
$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 并且 :first 将为您选择该表的第一个孩子，但在这里

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

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

.on('change', handleSugarChange);

.on 用于将事件绑定到该元素 .on(Eventname, action which will handle the event) 当此输入更改时，它将调用函数 handleSugarChange

函数内部

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

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

.data('root');

和以前一样，为该元素选择名为 data 的属性，该元素是触发更改的输入。

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

when radio button is selected what i think is selected class will be added to this input and then when you say .radio.selected that mean get the radio which selected which is inside the $root as refer above $(children, parent) if this是这 2 类的任何输入，则长度不会为 0，如果条件不匹配，则进入 else

$root.addClass('error');

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

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

于 2013-10-21T19:35:53.857 回答