更改文字和图片onclick

I am trying to figure out how to do this, but I can't get it.

It's supposed to be like a step by step-thing. When pressing the image, both the text and image will change. There are supposed to be 3 steps.

I have been trying a little bit js and php, but it haven't helped yet. Also CSS, but it's a little bit hard because it's 3, and not 2 steps. (I have been trying this e.g.: http://jsfiddle.net/eliranmal/2rwnz/)

        <div id="forsideslides" class="row">
            <div class="container">
                <div id="forsideslides_tekst" class="col col-lg-6 col-sm-6"><div class="well">
                    <h1>Step 1</h1>
                    <p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
                </div></div>
                <div id="forsideslides_bilde" class="col col-lg-4 col-sm-4"><div class="well">
                    <img src="<?php bloginfo('stylesheet_directory'); ?>step1.png">
                </div></div>
            </div>
        </div>

One of the codes I have been trying to use is the following:

$('.slider_innbokskontroll').click(function(){
    var $this = $(this);
    $this.toggleClass('slider_innbokskontroll');
    if($this.hasClass('slider_innbokskontroll')){
        $this.text('Les mer');          
    } else {
        $this.text('Les enda mer');
    }
});

But it was not what I have was looking for.

By pressing the image (see code below) it should change.

<div id="forsideslides_bilde" class="col col-lg-4 col-sm-4"><div class="well">
   <img src="<?php bloginfo('stylesheet_directory'); ?>step1.png">
</div></div>

It should be changing like step1.png => step2.png (don't bother about the details with the link, I just made it simple to get it easier to understand)

The text below should also change:

<div id="forsideslides_tekst" class="col col-lg-6 col-sm-6"><div class="well">
   <h1>Step 1</h1>
   <p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
 </div></div>

E.g like:

Step 1 -> Step 2

Text 1 out of 3 -> Text 2 out of 3

And so forth...

As I see it, it is relatively simple, but I have really no idea of what I am doing. Is there someone who could help me finding the solution? A short code I may understand would be fine.

Thank you.

You need to place the click event on your image first and then change the text...

Here is an example with jquery:

$('#forsideslides_bilde img').click(function() {
    //Change text
    $('#forsideslides_innhold_tekst').html('New text');

    //Change image src
    $('#forsideslides_bilde img').attr('src', 'newImageLocation.png');
});

Looks to me like you are not targeting the correct DOM element.

In your example jQuery code:

$('.slider_innbokskontroll').click(function(){
    var $this = $(this);
    $this.toggleClass('slider_innbokskontroll');
    if($this.hasClass('slider_innbokskontroll')){
        $this.text('Les mer');          
    } else {
        $this.text('Les enda mer');
    }
});

You are trying to change the $(this) object, instead of what you want above.

So instead do something like this:

$('.slider_innbokskontroll').click(function(){
    $('#forsideslides_tekst h1').text('Step 2');
    $('#forsideslides_tekst p').text('Text 2 out of 3');
    $('#forsideslides_bilde img').attr('src', 'newimage.jpg');
});

where your on click will have the class slider_innbokskontroll

EDIT here is the jsfiddle: http://jsfiddle.net/2rwnz/204/

using your HTML code:

<div id="forsideslides" class="row">
    <div class="container">
        <div id="forsideslides_tekst" class="col col-lg-6 col-sm-6">
            <div class="well">
                <h1>Step 1</h1>
                <p class id="forsideslides_innhold_tekst">Text 1 out of 3</p>
            </div>
        </div>
        <div id="forsideslides_bilde" class="col col-lg-4 col-sm-4">
            <div class="well">
                <img src="http://placehold.it/350x150">
            </div>
        </div>
    </div>
</div>

the jQuery:

$("#forsideslides_bilde img").click(function(){
    if ($(this).attr('src') == 'http://placehold.it/350x150')  {
        $('#forsideslides_tekst h1').text('Step 2');
        $('#forsideslides_innhold_tekst').text('Text 2 out of 3');
        $(this).attr('src', 'http://placehold.it/350x200');
    } else if($(this).attr('src') == 'http://placehold.it/350x200') {
        $('#forsideslides_tekst h1').text('Step 3');
        $('#forsideslides_innhold_tekst').text('Text 3 out of 3');
        $(this).attr('src', 'http://placehold.it/350x300');
    }
});

You can also use a global variable to detect which step, but just because I want to show you how you can detect which image i coded it that way.

You can try calling a JavaScript function when the image is clicked. In order to do that, you'll need to assign an onclick event listener to the image tag. In my example I'm using getElementsByName() so I'm giving each element a name tag as well...

<h1 name="change">Step 1</h1>
<p name="change">Step 1 of 3</p>
<img src="step1.png" name="change" onclick="nextStep()" />

Then you can use the Javascript code to get each one of the elements and change them accordingly. You should be able to add in the PHP method call for the image name without any issues.

<script language="javascript">
    function nextStep() {
        var changeElements = document.getElementsByName("steps");
        changeElements[0].innerHTML = "Step 2";          // header tag
        changeElements[1].innerHTML = "Text 2 out of 3"; // paragraph tag
        changeElements[2].src = "<?php bloginfo('stylesheet_directory'); ?>step2.png";             // image tag
</script>

If the bloginfo('stylesheet_directory'); method call doesn't work within the JS code, you can assign that to a PHP variable instead and reference that variable in the JS code.