Question

有一个问题，当我点击相应的图像时标题中的文字不会改变。目的是取代文本。或隐藏并显示相应的文本。

编辑：

感谢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>" );
    });

单击图像时替换文本

2 个答案: