jQuery 各功能不工作的解决办法

Question

当我单击 yesBtn 或 noBtn 时，我希望 html 中相应的 divs 显示 'none' 成为块。换句话说，当我单击 yesBtn 时，我希望显示样式：块，但是，如果单击 noBtn，我希望 div 和 id="no-section" 具有显示样式"block"。我认为 each() 函数可以解决我的问题。但是，当我单击 yesBtn 或 noBtn 时，yes-section 的显示样式变为 "block"。 chrome控制台输出[Object Object]。非常欢迎任何帮助和解释。

const yesBtn = $('#yes-btn'),
        noBtn = $('#no-btn'),
        yesSection = $('#yes-section'),
        noSection = $('#no-section');

$([yesBtn, noBtn]).each(function () {
        $(this).on('click', function () {
            console.log($(this) + ' was just clicked');
            $([yesSection, noSection]).each(function () {
                $(this).css('display', 'block');
            });
            $(this).parent().slideToggle();
        });
    });

更新代码：在 Google Chrome 中，我现在看到了 noBtn 和 yesBtn 的正确索引。但是，它们都继续对应于 div yes-section 并将显示更改为 block.

$.each(array, (index, value) => {
        value.on('click', function () {
            console.log(index);
            $.each([yesSection, noSection], (index, value) => {
                value.css('display', 'block');
            });
            value.parent().slideToggle();
        });
    });

Answer 1

每个方法都需要一个数组才能工作。你可以这样尝试：

const yesBtn = $('#yes-btn'),
    noBtn = $('#no-btn'),
    yesSection = $('#yes-section'),
    noSection = $('#no-section');
var array = [yesBtn,noBtn];

array.each(function () {
    $(this).on('click', function () {
        console.log($(this) + ' was just clicked');
        $([yesSection, noSection]).each(function () {
            $(this).css('display', 'block');
        });
        $(this).parent().slideToggle();
    });
});

Answer 2

首先让我们看看当您的代码被执行时会发生什么：

console.log($(this) + ' was just clicked')：这里我们有一个 object ($(this)) 与 string 连接，这通常不会发生：
- JavaScript 引擎尝试转换（表示会更好）object（在我们的例子中是 $(this)），因此它调用 toString 方法 object.
- 任何 object 默认情况下都有 toString 方法，因为 prototype 的链作为任何 JavaScript object 继承来自基数 Object，它 returns 实际 object 的字符串表示（在我们的例子中是 $(this)）。
- 因为 jQuery 没有覆盖默认的 toString 方法，返回默认响应（即 [object Object]）。
- 现在我们有 object 字符串表示形式 [object Object] 与 was just clicked 连接，这就是您得到 [object Object] was just clicked 的原因。
- 如果您想记录 $(this) 对象，您可以将其传递给 console.log，而不与其他字符串进行任何连接。
$(this).css('display', 'block')：在迭代 yesSection 和 noSection 的循环中，$(this) 相应地获取它们中的每一个并应用到它们 display: block因此无论按下哪个button都会出现section

所以，这里有一个演示如何根据按下的 button 显示特定的 section :

事实上，您不需要遍历 sections。
在点击侦听器中检查按下了哪个按钮：
- 如果按下 yesBtn，则显示 yesSection 并隐藏 noSection。
- 否则，显示 noSection 并隐藏 yesSection。
- 此外，无需对 display 规则进行硬编码，只需调用 jQuery 的 show() 和 hide 方法即可。

这是一个演示：

const yesBtn = $("#yes-btn"),
  noBtn = $("#no-btn"),
  yesSection = $("#yes-section"),
  noSection = $("#no-section");

$([yesBtn, noBtn]).each(function() {
  $(this).on("click", function() {
    /** check if "yesBtn" was pressed using "is" method **/
    if ($(this).is(yesBtn)) {
      yesSection.show();
      noSection.hide();
    } else {
      noSection.show();
      yesSection.hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="yes-btn">yes</button>
<button id="no-btn">no</button>
<div id="yes-section" style="display: none;">yes section</div>
<div id="no-section" style="display: none;">no section</div>

Learn more about is method.

jQuery 各功能不工作的解决办法

jQuery each function not working solution

jquery

each