0

クリックで画像を切り替えようとしています。部分的に機能していますが、部分的に機能していません:'(
デモ: 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 に答える