2

我正在尝试以 a 为目标，<div>它是函数<li>父级的下一个。我试过, , 等等...没有运气，有什么想法吗？<div>show_projectinfo().next().closest()

功能是，如果我单击a.more_info然后li.slider img隐藏...我不知道它是否完全超出范围...这是一个重复的 div，所以我不能只使用 ID。

标记：

    <li class="info">
        <a id="previous-slider"> < </a>
        <span>01/15</span>
        <a id="next-slider" href="javascript:void(0)"> > </a>  
        <a class="more_info" href="javascript:void(0)" onclick="show_projectinfo()">Info</a>
    </li>
    <li class="slider">
        <img src="img/horizontal.jpg" alt="horizontal" width="624" height="429">
    </li>

这是脚本：

    function show_projectinfo(){
        $(this).closest('.slider img').hide();
        $('.info_content').fadeIn();
    }
4

5 回答 5

3

基本问题是您正在调用该方法，onclick而不是将其与 jquery 绑定。

在您使用它的方式中，this指的是窗口而不是被单击的元素。

function show_projectinfo(e){
    e.preventDefault();
    $(this).parent().next().find('img').hide();
    $('.info_content').fadeIn();
}

$(function(){
    $('.more_info').click(show_projectinfo);
});

并从 html 中删除onclick属性

如果您有（尽管您不应该）使用该onclick属性，那么将其this作为参数传递

function show_projectinfo(element){
    $( element ).parent().next().find('img').hide();
    $('.info_content').fadeIn();
}

和

<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo(this)">Info</a>
于 2013-04-23T15:05:38.640 回答
0

尝试：

$(this).parent().next() // parent() should be the <li> then next() will get your next <li>
于 2013-04-23T15:00:25.343 回答
0 
$('.more_info').click(function(e){
    e.preventDefault();
    $(this).parent().next().find('img').hide();
    $('.info_content').fadeIn();
});
于 2013-04-23T15:04:13.947 回答
0

而不是.closest使用.parentand .next，然后选择 img with .find。

看看这个jsFiddle：

$("a.more_info").bind("click", function(e){
    e.preventDefault();
    $(this).parent("li").next("li.slider").find("img").hide();
    $('.info_content').fadeIn();
    return false;
});
于 2013-04-23T15:05:23.530 回答
0 
$('li').click( function (){
       var nextLi = $(this).closest('div').next().children('li:first-child').attr('id');
    console.log(nextLi);    
});

考虑以下标记：

<div id='div1'>
    <li id='1'>1</li>
    <li id='2'>2</li>
    <li id='3'>3</li>
</div>
<div id='div2'>
    <li id='4'>4</li>
    <li id='5'>5</li>
    <li id='6'>6</li>
</div>

您可以查看我的实时jsFiddle了解更多详细信息。

于 2013-04-23T15:14:08.297 回答