Question

我正在学习并试图整理一些jquery。不可否认，我发现很难找到一个好的基础指南，特别是在向一个页面添加多个动作时。

我在某处读到文件监听器只应使用一次。我相信我在这里使用它两次，但不是100％确定如何将它带入一个听众。

另外因为我一直在乱砍一些脚本，我想我正在使用部分javascript和部分jQuery。这是对的吗？

对以下代码的批评[确实有效]以及关于如何最好地学习jQuery的任何建议将是最有帮助的。感谢。

脚本1根据单击的按钮设置一组3个单选按钮。 脚本2将新输入附加到表单的底部。

var stateNo = <?php echo $HighestPlayerID; ?> + 1; 

$(document).on('click', 'input', function () {
    var name = $(this).attr("name");
    if ($('input[name="' + name + '"]:eq(1)')[0].checked) {
        $('label[name="' + name + '"]:eq(1)').addClass('nostate');
        $('label[name="' + name + '"]').removeClass('selected');
    }
    else {
        $('label[name="' + name + '"]').removeClass('nostate selected');
        if ($('input[name="' + name + '"]:eq(0)')[0].checked) {
            $('label[name="' + name + '"]:eq(0)').addClass('selected');
        }
        else {
            $('label[name="' + name + '"]:eq(2)').addClass('selected');
        }
    }
});


$(document).on('click', 'button[name=btnbtn]', function () {
    var stateName = 'state[' + stateNo + ']';
    var newPlayerAppend = `` +
        `<tr><td>` + 
        `<input type="hidden" name="state['` + stateNo + `'][PlayerID]" value="` + stateNo + `" /></td>` + 
        `<td><input name="` + stateName + `[Name]" value="Name"></td>` + 
        `<td><input name="` + stateName + `[Team]" type="radio" value="A">` +
        `<td><input name="` + stateName + `[Team]" type="radio" value="">` +
        `<td><input name="` + stateName + `[Team]" type="radio" value="B">` +
        `</td></tr>`;
    $("tbody").append(newPlayerAppend);
    stateNo++;
});

3个单选按钮输入的HTML

<td class="Choice">
<label name="state[1][Team]" class="teampick Astate ">A
<input name="state[1][Team]" type="radio" value="A" />
</label>
<label name="state[1][Team]" class="smallx nostate ">X
<input name="state[1][Team]" type="radio" value="" checked />
</label>
<label name="state[1][Team]" class="teampick Bstate">B
<input name="state[1][Team]" type="radio"  value="B" />
</label>
</td>

Answer 1

您有2个地方使用匿名功能。如果代码块移动到命名函数，则整个代码变得更易于维护。通过告诉您错误可能存在哪个函数名称，它还有助于更好地进行调试。
一旦你命名了函数，你就会发现你确实有2个事件监听器可以点击。因此，在一个监听器（或者您可能指的是一个功能）中移动它们没有多大好处。这两个事件侦听器都附加在文档对象上并侦听单击事件。
连字时，类名总是更好。 a-state超过Astate。
如果它有效，那么一旦您询问正确性，它就是正确的代码。

Answer 2

有些代码可以更简洁地编写，或者更简洁，但首先我要强调当前解决方案的问题：

如果不是浏览器尝试解决不一致问题，以下将生成无效的HTML：

var array = ['a', 'b', 'c']

function loopLettersEvery3Seconds(arr, index) {
    if (index === arr.length) return;
    //Do stuff with array
    setTimeout(loopLettersEvery3Seconds, 3000, arr, index+1)
}
loopLettersEvery3Seconds(array, 0)

var array = ['a', 'b', 'c'] function loopLettersEvery3Seconds(arr, index) { if (index === arr.length) return loopLettersEvery3Seconds(arr, 0); setTimeout(loopLettersEvery3Seconds, 3000, arr, index+1) } loopLettersEvery3Seconds(array, 0)元素不能将$("tbody").append(newPlayerAppend);元素作为直接子元素。如果您确实希望添加的内容成为表格的一部分，则需要添加行和单元格，并将新的tbody元素放在其中。

以下是我建议的代码，它与您的代码大致相同：

input

有两个处理程序没有问题。它们处理不同的目标元素，即使它们处理相同的元素，它仍然不是一个真正的问题：DOM旨在处理多个事件处理程序。

Answer 3

拥有多个听众绝对没问题，但我通常更喜欢把所有东西放在一个屋檐下。考虑使代码尽可能简单，这在维护期间节省了大量时间。

您可以使用 $（function（）{}）或 document.ready（）。

$(document).ready(function() {

    $('input[type="radio"]').click(function() {
     var thisa = $(this).parent();
     var name = $(this).attr("name");
     // Remove :selected class from the previous selected labels.
      $('label[name="' + name + '"]').removeClass('selected');
      // Add conditional class with tenary operator.
      thisa.parent().hasClass("smallx") ? thisa.addClass('nostate') : thisa.addClass('selected');
    });

    $('button[name=btnbtn]').click(function() {
         var stateName = 'state[' + stateNo + ']';
            // Add TR and TD before appending the row to tbody
            var newPlayerAppend = `<tr><td>` + 
                `<input type="hidden" name="state['` + stateNo + `'][PlayerID]" value="` + stateNo + `" />` + 
                `<input name="` + stateName + `[Name]" value="Name">` + 
                `<input name="` + stateName + `[Team]" type="radio" value="A"></td></tr>`;

            $("tbody").append(newPlayerAppend);
            stateNo++;
    });
 });

希望这有帮助。

有没有更简单的方法来执行此脚本？

3 个答案: