0

我正在尝试在 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>

非常感谢您的任何指点。

4

2 回答 2

1

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

改变这个

$("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）图像交换功能的改变，

$("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)将帮助您在正确的上下文中获取图像。

在这里检查小提琴测试

于 2012-12-13T15:54:06.587 回答
0

看起来你在这里遇到了一些问题。我没有看到您已将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);

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

于 2012-12-13T15:58:13.780 回答