CODEWITHSUNDEEP
jqueryhtmlimagereplacewith
lala
lala

Reputation: 151

Replacing texts when clicking on image

Having an issue where the texts in the header does not change when i click on the respective images. Was intended purpose is to replace the text. Or hide and show the respective texts.

EDIT:

Thanks for the src=' ' tips guys. However, it only worked once for the change, and the .byline doesn't change.

$("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/

Upvotes: 0

Views: 29

Answers (2)

NID
NID

Reputation: 3294

You have problem with your selector. your selector should be img[src="url"]

Try this updated code:

$('.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>" );
    });

Upvotes: 1

Vikram Singh
Vikram Singh

Reputation: 972

    $("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>" );
});

Upvotes: 1

Related Questions