Question

我在使用CMS中的脚本时遇到了一些麻烦。这是一个相对简单的jQuery show / hide工作正常，直到我需要在一个页面上多次使用它。我试图将其转换为使用每个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位。我基本上希望它能够获取每个show / hide div的个人ID，所以它只打开那个。这是我当前的脚本，但是如果页面上有多个div，则会打开并关闭所有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

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 2

错误很明显。您使用变量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 3

在这一行：

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

什么时候定义变量id是什么？

Answer 4

我无法全面了解您的情况（我很擅长），但这是我认为您需要的东西......如果不是，请告诉我，我会更新以反映您的需求

假设以下标记，

<div id=articlesContainer>

    <div class=articleSlide>
        <p>Crappety crappety crap!</p>
        <p>Feed me moar crap!</p>
    </div>
    <a class=showHideArticle>More...</a>

    <div class=articleSlide>
        <p>Crappety crappety crap!</p>
        <p>Feed me moar crap!</p>
    </div>
    <a class=showHideArticle>More...</a>

</div>

和javascript

$('a.showHideArticle').click( function (e) {
    $(this).prev().slideToggle('slow');
});

或（我个人最喜欢的）

$('#articlesContainer').delegate('a.showHideArticle', 'click', function (e) {
    $(this).prev().slideToggle('slow');
});

性能相对较好，也适用于动态添加的文章！

有了这个，每当你点击一个.showHideArticle时，相应的.articleSlide应该切换，当然有一个漂亮的幻灯片动画;）

编辑哦，如果你想使用openSlider和closeSlider功能（不知道为什么你会喜欢它），那么你可以检查一下.articleSlide已经显示if ($(this).is(':visible'))，并相应地致电openSlider或closeSlider。

Answer 5

$（“＃articleSlide_”+ id）应该很可能成为$（“＃articleSlide_”+ current.id）

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

5 个答案: