0

我使用以下代码

<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>

它应该做什么：

  • 当您单击图像时，图像将隐藏并显示文本“返回一些信息”。
  • 现在，当我单击文本“返回一些信息”时，我应该得到以前的图像

问题：

  • 我无法显示图像。可能我不知道如何正确选择类'.getinfo'
4

2 回答 2

2

你没有做正确的选择。这是您的代码的修改版本，可以正常工作：http: //jsfiddle.net/ertaD/4/

我已经修改了选择以获取最接近的 li 并且在该 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");
    }
);
于 2012-05-08T11:25:49.383 回答
0

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

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

注意我还使用了ShowandHide方法让事情变得比设置 css 属性更容易

这是一个工作示例

由于我缺少使用双亲的需要，因此在这种情况下使用选择器来查找与给定选择器查询匹配的第一个父级.parent().parent()会更合适，如下所示：closest

$(this).closest("li").children('.getinfo').show();
于 2012-05-08T11:26:34.083 回答