Question

我试图在点击按钮后更改跨度中的文本。我有四个按钮，我想在点击每个按钮后更改文本。

任何帮助将不胜感激！

这是我的代码：

<html>
<body>
<button id="product" value="2" onclick="setTime(product[this].time)">first button</button>
<button id="product" value="3" onclick="setTime(product[this].time)">second button</button>

            <span id="time">16-20 min</span>
            <span id="water">750 ml</span>
            <span id="salt">10,5g</span>
            <span id="comments">ajsdhaskj</div>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/vegetables.js"></script>

<script type="text/javascript">

        setTime(product[0].time);
        setWater(product[0].water);
        setSalt(produkt[0].salt);
        setComment(produkt[0].comment);     



    $('#product').onclick('change', function() {
        var numb = $(this).value();

        setTime(product[numb].time);
        setWater(product[numb].woda);
        setSalt(product[numb].salt);
        setComment(product[numb].comment);

    });

    function setTime(time) {
        $('#time').html(time);
    }

    function setWater(water) {
        $('#water').html(water);
    }

    function setSalt(salt) {
        $('#salt').html(salt);
    }

    function setComment(comment) {
        $('#comment').html(comment);
    }
</script>

我的vegeatbles.js

var product = [
{name: 'Carrot',time: '12 min',water: '12 min',salt: '12 min',comment: 'Carrot comment'},
{name: 'Potato', time: '123 min', water: '1 ml', salt: '10.5g',comment: 'potato comment'
}]

Answer 1

有一个关于你的代码有什么问题的looong列表。我可能错过了一些东西：

您不能拥有多个具有相同ID的元素。请改用class。
您的按钮的值为2和3，然后您尝试引用数据元素，但只有两个元素，因此没有2或3。
使用“#comment”选择器设置注释，但元素的实际ID为“#comments”。
您的数据位于product变量中，但您有时会在produkt之前引用它。
您的按钮上的onclick事件似乎是多余的，因为您已经通过jQuery附加了setTime个事件。
您需要在加载页面时在元素上附加事件。

这是您的代码的重新制作：

var product = [
{name: 'Carrot',time: '12 min',water: '12 min',salt: '12 min',comment: 'Carrot comment'},
{name: 'Potato', time: '123 min', water: '1 ml', salt: '10.5g',comment: 'potato comment'
}];

jQuery( function( $ ) {
  setTime( product[ 0 ].time );
  setWater( product[ 0 ].water );
  setSalt( product[ 0 ].salt );
  setComment( product[ 0 ].comment );

  $( '.product' ).click( 'change', function() {
    var numb = Number( $( this ).val() );
    setTime( product[ numb ].time );
    setWater( product[ numb ].woda );
    setSalt( product[ numb ].salt );
    setComment( product[ numb ].comment );
  } );
} );

function setTime( time ) {
  $( '#time' ).html( time );
}

function setWater( water ) {
  $( '#water' ).html( water );
}

function setSalt( salt ) {
  $( '#salt' ).html( salt );
}

function setComment( comment ) {
  $( '#comments' ).html( comment );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="product" value="0">first button</button>
<button class="product" value="1">second button</button>
<span id="time">16-20 min</span>
<span id="water">750 ml</span>
<span id="salt">10,5g</span>
<span id="comments">ajsdhaskj</div>

Answer 2

这对我有用。看看我的example

    <body>
<button id="product" value="0" onclick="loadContent(this.value)">first button</button>
<button id="product" value="1" onclick="loadContent(this.value)">second button</button>

            <span id="time">16-20 min</span>
            <span id="water">750 ml</span>
            <span id="salt">10,5g</span>
            <span id="comments">ajsdhaskj</span>
<script type="text/javascript">




var product = [
    {name: 'Carrot',time: '12 min',water: '12 min',salt: '12 min',comment: 'Carrot comment'},
    {name: 'Potato', time: '123 min', water: '1 ml', salt: '10.5g',comment: 'potato comment'
    }]


    function setTime(time) {
        $('#time').html(time);
    }

    function setWater(water) {
        $('#water').html(water);
    }

    function setSalt(salt) {
        $('#salt').html(salt);
    }

    function setComment(comment) {
        $('#comments').html(comment);
    }

    function loadContent(buton){
        setTime(product[buton].time);
        setWater(product[buton].water);
        setSalt(product[buton].salt);
        setComment(product[buton].comment); 
    }

   loadContent(0);

</script>

Answer 3

使用此代码。这是jsfiddle。

注意：我也改变了一些变量。

    var product = [{name: 'Carrot',time: '12 min',water: '12 min',salt: '12 min',comment: 'Carrot comment'},{name: 'Potato', time: '123 min', water: '1 ml', salt: '10.5g',comment: 'potato comment'}];
 
    $('button').click(function() {
        var num = $(this).val();
        document.querySelector('#time').innerHTML = num;
        setTime(product[num].time);
        setWater(product[num].water);
        setSalt(product[num].salt);
        setComment(product[num].comment);
    });

    function setTime(time) {
        $('#time').html(time);
    }

    function setWater(water) {
        $('#water').html(water);
    }

    function setSalt(salt) {
        $('#salt').html(salt);
    }

    function setComment(comment) {
        $('#comment').html(comment);
    }

<button id="product0" value="0">
    first button
</button>
<button id="product1" value="1">
    second button
</button>

<span id="time">16-20 min</span>
<span id="water">750 ml</span>
<span id="salt">10,5g</span>
<span id="comments">ajsdhaskj</span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

是的，我的意思是＆＃34;产品＆＃34;在每个地方。我正在尝试为不同的产品展示不同的烹饪时间，水等。我可以使用一个函数来检查单击了哪个按钮，之后从我的vegetables.js中读取了适当的值吗？

实际上，单击按钮后代码无效。在此之前，我尝试了选择元素，它似乎工作正常。我需要改变选择和使用许多按钮的动作。

<html>
<body>
<select id="product">
    <option value="0">Carrot</option>
    <option value="1">Potato</option>
    <option value="2">Corn</option>
</select>

<span id="time">16-20 min</span>
<span id="water">750 ml</span>
<span id="salt">10,5g</span>
<span id="comments">comment</span>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/vegetables.js"></script>

<script type="text/javascript">

    setTime(product[0].time);
    setWater(product[0].water);
    setSalt(product[0].salt);
    setComment(produkt[0].comment);     

 $('#product').onchange('change', function() {
    var numb = $(this).value();

    setTime(product[numb].time);
    setWater(product[numb].woda);
    setSalt(product[numb].salt);
    setComment(product[numb].comment);

});

function setTime(time) {
    $('#time').html(time);
}

function setWater(water) {
    $('#water').html(water);
}

function setSalt(salt) {
    $('#salt').html(salt);
}

function setComment(comment) {
    $('#comment').html(comment);
}
 </script>
 </body>
 </html>

Javascript如何在单击每个按钮后更改paragrap中的文本

4 个答案: