更改文本和圖像onclick

Question

我想弄清楚如何做到這一點，但我無法得到它。

這應該是一步一步的事情。按下圖像時，文字和圖像都會改變。應該有3個步驟。

我一直在嘗試一點點js和php，但它還沒有幫助。也是CSS，但它有點難，因爲它是3，而不是2步。 （我一直在嘗試此例如爲：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> 

我一直在嘗試使用代碼如下：

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

，但它不是我所要找的東西。

按下圖片（見下面的代碼）它應該改變。

<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> 

應該改變像step1.png => step2.png（不要理會該鏈接的細節，我只是做了簡單讓它更容易理解）

文本下面也應該改變：

<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> 

例如像：

第1步 - >第2步

文本1出3 - >正文2出3

，...等

在我看來，這是比較簡單的，但我真的沒有我在做什麼的想法。有人能幫我找到解決方案嗎？我可能會理解的簡短代碼會很好。

謝謝。

Answer 1

看起來像你對我沒有瞄準正確的DOM元素。

在您的例子jQuery代碼：

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

您正試圖改變$（本）對象，而不是你想要什麼上面。

因此，而不是做這樣的事情：

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

在您的點擊將有類slider_innbokskontroll

編輯這裏是的jsfiddle：http://jsfiddle.net/2rwnz/204/

使用HTML代碼：

<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> 

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'); 
    } 
}); 

您還可以使用全局變量來檢測哪一步，但僅僅是因爲我想告訴你如何檢測我以這種方式編碼的圖像。

Answer 2

您需要首先把你的圖像上單擊事件，然後更改文字...

下面是用jQuery的例子：

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

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

Answer 3

單擊圖像時，您可以嘗試調用JavaScript函數。爲了做到這一點，您需要將一個onclick事件監聽器分配給圖像標籤。在我的例子我使用getElementsByName()所以我給每個元素的名稱標籤，以及...

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

然後你可以使用JavaScript代碼來獲取元素中的每一個和相應的改動。你應該可以在沒有任何問題的情況下添加圖像名稱的PHP方法調用。

<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> 

如果bloginfo（'stylesheet_directory'）;方法調用在JS代碼中不起作用，您可以將其分配給PHP變量，並在JS代碼中引用該變量。