使用正确的语法创建 .each() 函数答案

【问题标题】：Creating a .each() function with proper syntax使用正确的语法创建 .each() 函数
【发布时间】：2015-10-29 19:01:27
【问题描述】：

这是一个菜鸟问题，所以我提前道歉。基本上我有一堆这些小代码sn-ps：

$('#botBox').on('click', '#quest11',function(){
    $("#divContent1").hide().html(quest11).fadeIn(500);
});     
$('#botBox').on('click', '#quest12',function(){
    $("#divContent1").hide().html(quest12).fadeIn(500);
});                 
$('#botBox').on('click', '#quest13',function(){
    $("#divContent1").hide().html(quest13).fadeIn(500);
});

正如您所见，它基本上是一遍又一遍的相同代码，我想创建一个 .each 函数而不是一堆冗余代码。

它所指的标记：

               <p id="quest11" class="quest">C'est quoi?</p>
               <p id="quest12" class="quest">Avantages</p>

它所指的字符串：

var quest11 = "blah blah";
var quest12 = "blah blah blah";

以此类推。

这是我想出的：

   $(".quest").each(function(){
            $('#botBox').on('click','#' + $(this).attr("id"),function(){
                $("#divContent1").hide().html($(this).attr("id")).fadeIn(500);
            });     
    });

这样做的问题是 .html() 输出将完全是作为字符串的 ID。换句话说，quest12 的输出将是“quest12”而不是“blah blah blah”。

在本例中，我将如何将 quest12 解释为变量 quest12 而不是字符串？

【问题讨论】：

您是否专门使用 .each() 来学习如何在这种情况下使用它？您可以为所有这些创建一个类，并使用 $(this).attr(id) 轻松执行您想要的功能以获取点击项目
您误解了 .each 函数，它是为了迭代一组事物，所以假设您想从每个具有 quest.void 类的 div 中获取所有 id 的答案如下应该做你想做的事。
请不要使用$(this).attr("id")，DOM 发送过来就好了。 this.id 要简单得多。
任务编号，求数组。也许使用数组会使解决方案更清晰？

标签： javascript jquery html dry

【解决方案1】：

使用

$(".quest").click(function(){
    $("#divContent1").hide().html(window[$(this).attr("id")]).fadeIn(500);
});

$(this).attr("id") 只是一个字符串，window[$(this).attr("id")] 将返回 var $(this).attr("id") 的全局值

$(".quest").click() 将在类.quest 的所有元素上注册点击事件，因此您不需要使用.each。

或者如果 var 是本地的，请改用 eval

$(".quest").click(function(){
    $("#divContent1").hide().html(eval[$(this).attr("id")]).fadeIn(500);
});

【讨论】：

例如，当我尝试您的代码并单击 quest12 时，.html() 输出变为“Avantages”。不仅如此，quest12
元素也消失了。到目前为止，对我的帖子的每一个回复都是这样做的。至少我明白我不需要 .each 函数。
假设我点击了带有 quest12 ID 的
元素。使用我的代码，输出变为“quest12”。使用您的代码，它变成“Avantages”。预期的结果是“Blah blah blah”。如果这让您感到困惑，请重新阅读我的问题。
我明白了。奇怪的。那么上面提供的另一个答案工作得很好。不过，谢谢！

【解决方案2】：

首先创建一个对象来保存不同的文本：

var quests = {
  quest11 : "blah blah",
  quest12 : "blah blah blah"
}

然后使用'[id^=quest]'“attribute-starts-with”选择器将所有quest元素委托给botBox。

那么你可以简单地使用this.id来获取被点击任务的id，并将其作为quests对象的key。

// All quest elements ----v---------v
$('#botBox').on('click', '[id^=quest]', function() {
    $("#divContent1").hide().html(quests[this.id]).fadeIn(500);
}); // Use the ID of the element --------^-----^

【讨论】：

无论出于何种原因，该线程中唯一有效的答案。谢谢！
@FelixMaxime：不客气。是的，他们很接近，但并没有真正仔细阅读您的代码。 eval 的答案在技术上是可行的，但它是所有反模式之母。

【解决方案3】：

您不需要使用.each。您可以将处理程序直接绑定到所有元素。然后获取元素的ID，可以使用this.id。

不要使用全局变量quest11、quest12，您应该将它们设为对象的属性：

var questions = {
    quest11: "blah blah",
    quest12: "blah blah blah"
};


$("#botBox").on("click", "p", function() {
    $("#divContent1").hide().html(questions[this.id]).fadeIn(500);
});

【讨论】：

当我尝试你的代码时，.html() 输出变成了我点击的
中的任何内容。因此对于 quest12，输出变为“Advantages”而不是“Blah blah blah”。
哦，我错过了那些变量，我以为你是根据元素 ID 成为全局变量这一事实。
我已经更新了答案以展示如何使用对象而不是全局变量来做到这一点。

【解决方案4】：

$("#divContent1").hide().html(window[this.id]).fadeIn(500);

由于全局变量绑定到window对象

（假设var questXX变量是全局变量）

【讨论】：

请不要使用$(this).attr("id")，DOM 发送过来就好了。 this.id 要简单得多。
当然，这只是解决原始代码的最小更改。