JQuery - ID未定义。在函数中使用动态ID？

Question

我在获得一个在CMS中工作的脚本时遇到了一些困难。这是一个相对简单的jQuery显示/隐藏，运行良好，直到我需要在一个页面上多次使用它。我试图将其转换为使用每个DIV的单独ID，但现在它返回Firebug中的一个错误

未定义

id。

jQuery

$('.articleSlide').each(function () {
var current = $(this);
current.attr("box_h", current.height());


$(".articleSlide").css("height", "250px");
$(".showHide").html('<a href="#">More</a>');
$(".showHide a").attr("href", "javascript:void(0)");
$(".showHide a").click(function() { openSlider() })

});

function openSlider()

{
    var open_height = $("#articleSlide_" + id).attr("box_h") + "px";
    $("#articleSlide_" + id).animate({"height": open_height}, {duration: "slow" });
    $(".showHide").html('<a href="#">More</a>');
    $(".showHide a").click(function() { closeSlider() })
}

function closeSlider()

{
    $("#articleSlide_" + id).animate({"height": "250px"}, {duration: "slow" });
    $(".showHide").html('<a href="#">More</a>');
    $(".showHide a").click(function() { openSlider() })
}

HTML

<div class="articleSlide" id="articleSlide_1">
  <p>We work closely with clients to provide effective solutions for a wide variety of products and applications through brand creation and management, video and motion graphics, marketing and advertising, digital and editorial.</p>
  <p>We understand markets and how to communicate in a multi-platform environment.We work closely with clients to provide effective solutions for a wide variety of products and applications through brand creation and management, video and motion graphics, marketing and advertising, digital and editorial.</p>
</div>
<div class="showHide">

编辑

好的，我想我误解了我包含的ID位。基本上，我希望它能够获取每个显示/隐藏div的个人ID，所以它只打开了那个。这是我当前的脚本，但是如果页面上有多个div，它就会打开并关闭它们。

$(".articleSlide").each(function () {
var current = $(this);
current.attr("box_h", current.height());


$(".articleSlide").css("height", "250px");
$(".showHide").html('<a href="#">More</a>');
$(".showHide a").attr("href", "javascript:void(0)");
$(".showHide a").click(function() { openSlider() })


});

function openSlider()

{
    var open_height = $(".articleSlide").attr("box_h") + "px";
    $(".articleSlide").animate({"height": open_height}, {duration: "slow" });
    $(".showHide").html('<a href="#">More</a>');
    $(".showHide a").click(function() { closeSlider() })
}

function closeSlider()

{
    $(".articleSlide").animate({"height": "250px"}, {duration: "slow" });
    $(".showHide").html('<a href="#">More</a>');
    $(".showHide a").click(function() { openSlider() })
}
  <a href="#">More</a>
</div>

Answer 1

错误是很明显的。您使用变量id，但似乎从未定义它。

也许您的意思是让openSlider()接受一个id参数，并让您的.each处理程序将$(this).attr('id)传递给openSlider()。

closeSlider()也一样。

示例：

$('.articleSlide').each(function () {
  var current = $(this);
  current.attr("box_h", current.height());
  $(".articleSlide").css("height", "250px");
  $(".showHide").html('<a href="#">More</a>');
  $(".showHide a").attr("href", "javascript:void(0)");
  $(".showHide a").click(function() { openSlider(current.attr('id')) })
});

function openSlider(id) {
    var open_height = $("#articleSlide_" + id).attr("box_h") + "px";
    $("#articleSlide_" + id).animate({"height": open_height}, {duration: "slow" });
    $(".showHide").html('<a href="#">More</a>');
    $(".showHide a").click(function() { closeSlider(id) })
}

function closeSlider(id) {
    $("#articleSlide_" + id).animate({"height": "250px"}, {duration: "slow" });
    $(".showHide").html('<a href="#">More</a>');
    $(".showHide a").click(function() { openSlider(id) })
}

Answer 2

function openSlider()
{
    var open_height = $("#articleSlide_" + id).attr("box_h") + "px";

在最后一行中，id应该是什么？

你在这里也有同样的问题：

function closeSlider()
{
    $("#articleSlide_" + id).animate({"height": "250px"}, {duration: "slow" });

您需要修改这两个函数，以获得一个参数，指定要处理的元素(通过id作为元素本身或jQuery对象)，并更改id表达式以适当地引用该参数。

别忘了换台词

$(".showHide a").click(function() { openSlider() })

和

$(".showHide a").click(function() { closeSlider() })

传递此参数。

Answer 3

在这条线上：

function openSlider()
{
    var open_height = $("#articleSlide_" + id).attr("box_h") + "px";

您什么时候定义过变量id？