开发者问题收集

单击时切换图像

2012-12-13
172

我试图在单击时切换图像。它部分工作,但部分不工作 :'(
演示: http://jsfiddle.net/Tqwdh/4/

当我单击大图像时,较小的图像会发生变化(从 50x50 变为 151x151)- 欢呼!

但是当我单击“阅读更多”文本时,小图像仍是同一图像。 当我单击“阅读更多”文本时,小的嵌套图像需要更改。

有人可以告诉我如何解决这个问题吗?

我已附上我的 jQuery

$(function(){
        // The height of the content block when it's not expanded
        var adjustheight = 130;
        // The "more" link text
        var moreText = "Click to read more...";
        // The "less" link text
        var lessText = "Click to read less...";
        // Sets the .more-block div to the specified height and hides any content that overflows
        $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
        // The section added to the bottom of the "more-less" div
        $(".more-less").append('<p style="display:block;margin-top:8px"><a href="#" class="adjust"></a></p>');
        $("a.adjust").text(moreText);
        $(".adjust").toggle(function() {
                $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
                // Hide the [...] when expanded
                $(this).parents("div:first").find("p.continued").css('display', 'none');
                $(this).text(lessText);
            }, function() {
                $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
                $(this).parents("div:first").find("p.continued").css('display', 'block');
                $(this).text(moreText);
        });
        });

        $(function(){
            $('img').click(function(){
                $(this).closest('article').find('.adjust').click();
            });
        });

        $(function(){ 
           $("article").click(function(){ 
           $("img.small").attr('src',  
                        ($("img.small").attr('src') == 'http://placehold.it/50x50'  
                    ? 'http://placehold.it/151x151'  
                    : 'http://placehold.it/50x50' 
                             ) 
                        )  
            }); 
        }); 

和我的 HTML :

<article id="post-5" >

            <div class="more-less">    
                <div class="more-block">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam purus, lacinia eget placerat sit amet, bibendum nec nisl. Curabitur a mattis ipsum. Praesent quis nisi in purus malesuada rhoncus. Pellentesque ut quam eget libero congue lobortis. Nunc sed quam ac erat lobortis eleifend. Donec elementum sodales cursus. Aliquam porttitor massa nisi, in laoreet turpis. Sed consequat condimentum lorem ut dignissim. Sed hendrerit mauris ut massa fermentum laoreet. Pellentesque a leo vitae enim dictum lobortis. Praesent commodo feugiat velit iaculis malesuada.</p>
                    <p>Praesent sem lectus, ullamcorper eget ullamcorper a, congue vel nisl. Nullam volutpat leo vel dui venenatis dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac scelerisque lorem. Ut blandit magna eu turpis posuere gravida. Fusce egestas risus in libero ullamcorper sagittis. Vestibulum molestie metus vitae quam dignissim consequat. Vivamus id tellus id lorem consectetur iaculis sit amet interdum ante. Quisque lacinia tellus id mi tincidunt fermentum dignissim velit laoreet. Quisque scelerisque nunc iaculis nisi varius ultrices.</p>
                    <p>Phasellus id elit ac lacus faucibus ullamcorper. Etiam ullamcorper pretium tellus, ut pharetra ante pulvinar vel. Sed neque diam, semper vel rhoncus non, congue ut sapien. Integer a mi eget libero elementum lobortis. Donec hendrerit egestas ligula sit amet eleifend. Curabitur pharetra venenatis tempor. Quisque pulvinar malesuada justo, ut euismod arcu pharetra vitae. Cras lobortis, ligula id euismod euismod, ipsum risus varius urna, faucibus gravida lectus mi nec nulla. Fusce eleifend fringilla nibh ut vulputate. Vivamus sagittis leo metus. Etiam facilisis convallis lacus adipiscing hendrerit. Duis ultricies euismod libero, nec blandit est semper a. Phasellus sit amet justo sed quam elementum lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>

            <p>
                <img src="http://placehold.it/50x50" class="small" style="position:absolute;margin-left: 240px;margin-top: 127px;" />
                <a href="#" title="News Item 1"><img src="http://placehold.it/300x187" alt="News Item 1" width="300" height="187" /></a>
            </p>            

        </article>

非常感谢您的指点。

2个回答

因此,如果我理解正确的话,您所要做的就是,

将此

$("article").click(function() {
        //your code here
    });

更改为

$("article, .adjust").click(function() {
        //your code here
    });

检查小提琴 这里

编辑:

更改了几件事以匹配您的需要,

1)将此

$(this).parents('article').find('.adjust').click();

更改为

$(this).parents('article').find('.adjust').trigger('click');

因为后者是触发事件的正确方法。

2)更改图像交换功能,

44804381​​6

使用 $(this) 将帮助您获得正确上下文中的图像。

检查 此处的小提琴测试

painotpi
2012-12-13

看起来您在这里遇到了一些问题。我没有看到您在 HTML 中的任何元素上应用了 adjust 类。我还看到 CSS 直接应用于 JavaScript。(为什么不使用 .css 文件?)

这部分代码看起来非常漂亮:

$("img.small").attr('src',  
    ($("img.small").attr('src') == 'http://placehold.it/50x50'  
    ? 'http://placehold.it/151x151'  
    : 'http://placehold.it/50x50' ))

这是三元运算符的良好使用。

我建议您将此代码用作 a.adjust 上的点击处理程序,假设展开图像的链接应该用 adjust 类修饰?

var changeImage = function() {
    $("img.small").attr('src',  
    ($("img.small").attr('src') == 'http://placehold.it/50x50'  
    ? 'http://placehold.it/151x151'  
    : 'http://placehold.it/50x50' ))
});
$('a.adjust').click(changeImage);
$('article').click(changeImage);

我希望这能有所帮助。如果问题写得更精确,可能会有所帮助。

Vivian River
2012-12-13