Jquery范围

Question

我刚刚开始学习Jquery，但这些例子对我没什么帮助......

现在使用以下代码发生的事情是我有4个表单，我在每个表单之间切换。但我无法弄清楚如何在第一个函数中获取变量“postOptionSelected”以传递给其他函数以显示更多用户选项。我意识到变量不是范围，但我该怎么做？

$(document).ready(function(){

$("#postOptions ul li a").click(function(event){
      var postOptionSelected = $(this).parent("li").attr("class").substr(11);
      $("form#post"+postOptionSelected).css('display', 'block');
      $("form.postForm:not(#post"+postOptionSelected+")").css('display', 'none');
      event.preventDefault();
});

$("form#post"+postOptionSelected+" div#postMore"+postOptionSelected+" a").click(function(event){
   $("form#post"+postOptionSelected+" div#postMore"+postOptionSelected).css('display', 'none');
   $("form#post"+postOptionSelected+" div#postLess"+postOptionSelected).css('display', 'block');
   $("form#post"+postOptionSelected+" div#postView"+postOptionSelected).css('display', 'block');
   event.preventDefault();
});

$("form#post"+postOptionSelected+" div#postLess"+postOptionSelected+" a").click(function(event){
   $("form#post"+postOptionSelected+" div#postLess"+postOptionSelected).css('display', 'none');
   $("form#post"+postOptionSelected+" div#postMore"+postOptionSelected).css('display', 'block');
   $("form#post"+postOptionSelected+" div#postView"+postOptionSelected).css('display', 'none');
   event.preventDefault();
});

});

Answer 1

你的问题不是变量范围;只是更多/更少的点击处理程序是你总是想要在锚点上的东西，而不是你添加和删除的东西。除非你真的想要去除点击处理程序，这并不好玩。试试这个版本。它要求所涉及的DOM元素可以使用相关的类，而不仅仅是ID;希望你会看到它意味着什么。我也冒昧地使用了一些操作的jQuery简写版本。

$(document).ready(function(){

    $("#postOptions ul li a").click(function(event){
        var sel = $(this).parent("li").attr("class").substr(11);
        $("form#post"+sel).show();
        $("form.postForm:not(#post"+sel+")").hide();
        event.preventDefault();
    });

    $("form.post div.postMore a").click(function(event){
        $(this).hide();
        $(this).siblings('div.postLess').show();
        $(this).siblings('div.postView').show();
        event.preventDefault();
    });

    $("form.post div.postLess a").click(function(event){
        $(this).hide();
        $(this).siblings('div.postMore').show();
        $(this).siblings('div.postView').hide();
        event.preventDefault();
    });

});