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 =＆gt;一样改变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 - ＆gt;第2步

文字1中的3 - ＆gt;文字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');
    }
});

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

点击后您将获得课程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（＆＃39; stylesheet_directory＆＃39;）;方法调用不在JS代码中工作，您可以将其分配给PHP变量，并在JS代码中引用该变量。

更改文本和图像onclick

3 个答案: