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

Question

这个问题有点菜鸟问题，提前致歉。基本上我有一堆这些小代码片段：

$('#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 而不是字符串？

Answer 1

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

因为全局变量绑定到window对象

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

Answer 2

使用

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

$(this).attr("id") 只是一个字符串，window[$(this).attr("id")] 将 return var $(this).attr("id")

的全局值

$(".quest").click()会在所有class.quest的元素上注册点击事件，所以你不需要使用.each。

或者如果 var 是本地的，则使用 eval 代替

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

Answer 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);
});

Answer 4

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

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 --------^-----^

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

Creating a .each() function with proper syntax

html

javascript

jquery

dry