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

你的问题不是变量范围太大；而是变量范围太大。只是更多/更少的点击处理程序是您始终希望位于相关 anchor 上的东西，而不是您添加和删除的东西。除非您真的想删除点击处理程序，否则这并不有趣。试试这个版本。它要求相关的类在所涉及的 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();
    });

});