1

我确定这是一个简单的，但我想不出如何让它工作。我试过 .next() 和 .nextAll() 无济于事。我唯一能想到的是我正在尝试的功能由于代码流而无法正常工作。无论如何，下面是适合您的 jquery 和 html。我只是想在单击下载时使表单框淡入。

HTML：

                 <div class="pdfs">
                    <div class="pdf-left">
                        <div class="image">
                            <img src="images/pdfs/macrolux/1.jpg" width="100" height="79">
                        </div>
                        <div class="text">
                            <div class="view">View</div>
                            <div class="download">Download</div>
                        </div>
                    </div>
                    <div class="pdf-right">
                        <div class="image">
                            <img src="images/pdfs/macrolux/2.jpg" width="100" height="79">
                        </div>
                        <div class="text">
                            <div class="view">View</div>
                            <div class="download">Download</div>
                        </div>
                    </div>
                </div>
                <div class="form-box">
                    Form
                </div>

jQuery：

$(document).ready(function(){
    $('div.download').on('click', function(){
        $(this).next('div.form-box').fadeIn('slow');
    });
});
4

4 回答 4

2

你没有$(this).next()，你可以在 chrome/firefox 中测试一下：

console.log($('div.download').next());

要获得正确的div，请尝试：

$(document).ready(function(){
    $('div.download').on('click', function(){
        $(this).parent().parent().parent().next().fadeIn('slow');
    });
});

演示

或者如果form-box您只想隐藏一个：

$(document).ready(function(){
  $('div.download').on('click', function(){
      $('div.form-box').fadeIn('slow');
  });
});
于 2013-01-20T12:24:51.090 回答
2

如果您没有超过一个，这应该足够了div.form-box

$(document).ready(function(){
  $('div.download').on('click', function(){
      $('div.form-box').fadeIn('slow');
  });
});

如果你有div.form-box每个pdfs div：

$(document).ready(function(){
    $('div.download').on('click', function(){
        $(this).parents('.pdfs').next('div.form-box').fadeIn('slow');
    });
});

演示

于 2013-01-20T12:25:10.170 回答
1

$(this).next()将针对任何下一个兄弟节点，而不是“HTML 中此之后的所有内容”。

您可以执行以下操作：

$(this).parent().parent().parent().next().fadeIn('slow');

不建议这样做：您对 DOM 所做的每次更改都会使您的 JS 发生更改。您可以更好地针对.form-box自身。

于 2013-01-20T12:25:49.123 回答
1

接受的答案很脆弱，如果您的文档结构发生变化，您需要重写 jquery。

更通用的解决方案是提供表单框 div 和您的下载 div 相关 id，例如

<div id="download-1" class="download">
   Download<
</div>

和

<div id="download-1_formbox" class="form-box">
    Form
</div>`

然后在你的jQuery中

$(document).ready(function(){
    $('div.download').on('click', function(){
        var divId=$(this).attr("id");
        $("#" + divId + "_formbox").fadeIn('slow');
    });
});

更新：根据要求，我添加了一些代码以使其切换，工作小提琴在这里/（只有第一个下载链接有效，没有给第二个链接一个 id）

于 2013-01-20T12:38:34.670 回答