Question

我正在使用以下代码

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//Document ready
$(document).ready(function(){   

    //Show info
    $('a.getinfo').live("click", function(event){
        event.preventDefault();
                $(this).css("display","none");
                $(this).next('.info').css("display","block");
        }
    );
    $('a.getback').live("click", function(event){
        event.preventDefault();
                $(this).css("display","none");
                $(this).prev('a.getinfo').css("display","block");
        }
    );



});
</script>
<style>
.info {
    display: none   
}
</style>
<ul>
    <li>
        <a href="#" class="getinfo">
            <img src="http://s13.postimage.org/7xkjh8991/image.jpg">
            <span class="sticker opacity">get info</span>
        </a>
        <div class="info">
        <a href="#" class="getback">
            some info
            <span class="sticker-back opacity">back</span>
        </a>
        </div>
    </li>
    <li>
        <a href="#" class="getinfo">
            <img src="http://s13.postimage.org/7xkjh8991/image.jpg">
            <span class="sticker opacity">get info</span>
        </a>
        <div class="info">
        <a href="#" class="getback">
            some info
            <span class="sticker-back opacity">back</span>
        </a>
        </div>
    </li>
    <li>
        <a href="#" class="getinfo">
            <img src="http://s13.postimage.org/7xkjh8991/image.jpg">
            <span class="sticker opacity">get info</span>
        </a>
        <div class="info">
        <a href="#" class="getback">
            some info
            <span class="sticker-back opacity">back</span>
        </a>
        </div>
    </li>
</ul>

应该做什么：

当您点击图片时，图片会隐藏并显示文字＆＃39;一些信息＆＃39;。
现在当我点击文字＆＃39;回复一些信息时，我应该得到上一张图片

问题：

我无法显示图片。可能我不知道如何正确选择班级＆＃39; .getinfo＆＃39;

Answer 1

你没有做出正确的选择。以下是适用于您的代码的修改版本：http://jsfiddle.net/ertaD/4/

我已经修改了select以获得最接近的li并且我已经找到了所需的元素。你正在隐藏.getback，并显示回.info（信息的内容仍然隐藏）

以下是代码：

$('a.getinfo').live("click", function(event){
    event.preventDefault();
            $(this).css("display","none");
            $(this).closest('li').find('.info').css("display","block");
    }
);
$('a.getback').live("click", function(event){
    event.preventDefault();
            $(this).parent().css("display","none");       
            $(this).closest('li').find('.getinfo').css("display","block");
    }
);

Answer 2

不要使用Prev选择器，因为它不会搜索所有以前的div。试试parent和children选择器：

$('a.getinfo').live("click", function(event){
    event.preventDefault();
            $(this).hide();
            $(this).parent().children('.info').show();
    }
);
$('a.getback').live("click", function(event){
    event.preventDefault();
            $(this).parent().hide();
            $(this).parent().parent().children('.getinfo').show();
    }
);

注意我还使用Show和Hide方法比设置css属性更容易

Here is a working example

由于我不想在.parent().parent()使用双父使用，因此在这个实例中使用closest选择器来查找与给定选择器查询匹配的第一个父类更合适这样：

$(this).closest("li").children('.getinfo').show();

我无法选择上一个元素

2 个答案: