Question

我正在尝试在Click上切换图像。它部分工作但部分不是：'（
演示： 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>

非常感谢任何指示。

Answer 1

所以，如果我理解正确的话，你所要做的就是，

更改此

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

要，

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

检查小提琴here

修改

更改了一些符合您需要的内容，

1）改变这个，

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

要，

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

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

2）改变图像交换功能，

$("article, .adjust").click(function() { /*Save references in variables*/ var imgToSwap = $(this).parents("article").find("img.small"); var img_small = 'http://placehold.it/50x50'; var img_large = 'http://placehold.it/151x151'; imgToSwap.attr('src', (imgToSwap.attr('src') == img_small ? img_large : img_small)); });

使用$(this)将帮助您在正确的背景下获取图像。

检查fiddle test here

Answer 2

看起来你在这里遇到了一些问题。我没有看到您已将adjust类应用于HTML中的任何元素。我也看到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);

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

在点击时切换图像

2 个答案: