单击图像时替换文本

Question

有一个问题，当我点击相应的图像时，header 中的文本没有改变。原本的目的是为了取代文字。或者隐藏和显示相应的文本。

编辑：

感谢 src=' ' 小伙伴们的提示。但是，它只对更改有效一次，.byline 不会更改。

$("img[src='http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg']").click(function(){
    $( "h1" ).replaceWith( "<h1>header1</h1>" );
    $('.byline').replaceWith( "<span>line1</span>" );
});

$("img[src='http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg']").click(function(){
    $( "h1" ).replaceWith( "<h1>header22</h1>" );
    $('.byline').replaceWith( "<span>line22</span>" );
});

$("img[src='http://placekitten.com.s3.amazonaws.com/homepage-samples/200/139.jpg']").click(function(){
    $( "h1" ).replaceWith( "<h1>header333</h1>" );
    $('.byline').replaceWith( "<span>line333</span>" );
});

https://jsfiddle.net/mbezfh3w/2/

Answer 1

    $("img[src='http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg']").click(function(){
    $( "h1" ).replaceWith( "<h1>header1</h1>" );
    $('.byline').replaceWith( "<span>line1</span>" );
});

$("img[src='http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg']").click(function(){
    $( "h1" ).replaceWith( "<h1>header22</h1>" );
    $('.byline').replaceWith( "<span>line22</span>" );
});

$("img[src='http://placekitten.com.s3.amazonaws.com/homepage-samples/200/139.jpg']").click(function(){
    $( "h1" ).replaceWith( "<h1>header333</h1>" );
    $('.byline').replaceWith( "<span>line333</span>" );
});

Answer 2

您的选择器有问题。你的选择器应该是 img[src="url"]

试试这个更新后的代码：

$('.imageCS').hover(function()
    {
        $(this).stop().animate({opacity:.3},500);
    }, function()

    {   
        $(this).stop().animate({opacity:1},1000)
    });

    $("img[src='http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg']").click(function(){
        $( "h1" ).replaceWith( "<h1>header1</h1>" );
        $('.title span').replaceWith( "<span>line1</span>" );
    });

    $("img[src='http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg']").click(function(){
        $( "h1" ).replaceWith( "<h1>header22</h1>" );
        $('.title span').replaceWith( "<span>line22</span>" );
    });

    $("img[src='http://placekitten.com.s3.amazonaws.com/homepage-samples/200/139.jpg']").click(function(){
        $( "h1" ).replaceWith( "<h1>header333</h1>" );
        $('.title span').replaceWith( "<span>line333</span>" );
    });

单击图像时替换文本

Replacing texts when clicking on image

html

jquery

image

replacewith