Javascript 更改文本和图像onclick

我想知道怎么做，但我搞不懂

这应该是一个循序渐进的过程。按下图像时，文字和图像都会改变。应该有三个步骤

我一直在尝试一点js和php，但还没有起到作用。还有CSS，但有点难，因为它是3步，而不是2步。（我一直在尝试，例如：）

但这不是我一直在寻找的

按下图像（请参见下面的代码），它应该会改变

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

步骤1.png“>

它应该像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

等等

在我看来，这是相对简单的，但我真的不知道我在做什么。有没有人可以帮助我找到解决方案？一个简短的代码，我可能理解会很好

---

谢谢。

您需要先在图像上放置单击事件，然后更改文本

以下是jquery的一个示例：

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

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

---

在我看来，您的目标不是正确的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');
    }
});

您正在尝试更改$（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');
});

您点击的地方将有类

滑块\u innbokskontroll

下面是JSFIDLE的编辑：

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

---

您还可以使用全局变量来检测哪一步，但这只是因为我想向您展示如何检测我以这种方式编码的图像。

您可以尝试在单击图像时调用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()" />

步骤1
第1步，共3步

然后，您可以使用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>

函数nextStep（）{
var changelements=document.getElementsByName（“步骤”）；
changeElements[0]。innerHTML=“步骤2”//头标记
changeElements[1].innerHTML=“文本三分之二”；//段落标记
changelements[2].src=“step2.png”；//图像标记

---

如果bloginfo（'样式表\目录'）；方法调用在JS代码中不起作用，您可以将其分配给一个PHP变量，并在JS代码中引用该变量。

那么您的问题是什么？您期望的结果是什么？您尝试了什么？等等……谢谢您的提问。我将在一分钟内更新帖子。在我看来，您的目标不是正确的DOM e元素。如果要更改单词，则需要执行类似于

$（“#forsideslides_tekst h1”）.text（'Step 2'）；

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

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

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