Question

这是一个简单的确定但我无法想到如何让它工作。我试过.next（）和.nextAll（）无济于事。我唯一能想到的是由于代码的流动我正在努力的功能。无论如何，下面是你的jquery和html。我只想在点击下载时尝试使用form-box淡入淡出。

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');
    });
});

Answer 1

你没有$(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');
    });
});

<强> DEMO

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

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

Answer 2

如果您没有多个div.form-box

，

This就足够了

$(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');
    });
});

<强> DEMO

Answer 3

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

您可以执行以下操作：

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

不建议不要这样做：每次对DOM进行的更改都会使您的JS发生变化。您可以更好地定位.form-box本身。

Answer 4

接受的答案很脆弱，如果您的文档结构发生变化，则需要重写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');
    });
});

更新：根据请求，我添加了一些代码来进行切换，工作小提琴是here /（只有第一个下载链接有效，没有给第二个下载链接）< / p>

jQuery不是针对我需要它的div

4 个答案: