Question

当有人点击带有各自id标记的p标记时，我需要用类u更改span标记的内容，该标记作为参数传递给函数，以便函数可以将该数字转换为数字，并将数字值转换为数字。访问数组，并将其作为新值添加，完全替换以前的值。

//html code
    <span id="u">My point</span>
    <p class="current" id="one" onclick="chan('one')">My point</p>
    <p id="two" onclick="chan('two')">text2</p>
    <p id="three" onclick="chan('three')">text2</p>
    <p id="four" onclick="chan('four')">text2</p>
    <p id="five" onclick="chan('five')">text2</p>
    <p id="six" onclick="chan('six')">text2</p>
    <p id="seven" onclick="chan('seven')" >text2</p>



//javascript code

    var titl = ['My point',
                'text2',
                'text3',
                'text4',
                'text5',
                'text6',
                'text7'
                ];

     function chan(pin){
        if(pin="two"){
                it = 1;
              }
              else if(pin="one"){
                it = 0;
              }
              else if(pin="three"){
                it = 2;
              }
              else if(pin="four"){
                it = 3;
              }
              else if(pin="five"){
                it = 4;
              }
              else if(pin="six"){
                it = 5;
              }
              else if(pin="seven"){
                it = 6;
              }

              document.getElementById("u").innerHTML = titl[it;
     }

Answer 1

U的类和ID有错误，javascript代码中也有一些错误：我有更改代码

//html code
    <span class="u" id="u">My point</span>
    <p class="current" id="one" onclick="chan('one')">My point</p>
    <p id="two" onclick="chan('two')">text2</p>
    <p id="three" onclick="chan('three')">text2</p>
    <p id="four" onclick="chan('four')">text2</p>
    <p id="five" onclick="chan('five')">text2</p>
    <p id="six" onclick="chan('six')">text2</p>
    <p id="seven" onclick="chan('seven')" >text2</p>



//javascript code

    var titl = ['My point',
                'text2',
                'text3',
                'text4',
                'text5',
                'text6',
                'text7'
                ];

     function chan(pin){
        if(pin="two"){
                it = 1;
              }
              else if(pin="one"){
                it = 0;
              }
              else if(pin="three"){
                it = 2;
              }
              else if(pin="four"){
                it = 3;
              }
              else if(pin="five"){
                it = 4;
              }
              else if(pin="six"){
                it = 5;
              }
              else if(pin="seven"){
                it = 6;
              }

              document.getElementById("u").innerHTML = titl[it];
     }

Answer 2

试试这个：

<p class='js-load-number' data-number='0'>one</p>
<p class='js-load-number' data-number='2'>three</p>
<p class='js-load-number' data-number='3'>four</p>

和jquery：

var updateScore = function() {
    var numberFromClicked = $(this).data('number');
    $('#u').html(numberFromClicked);
}
$('.js-load-number').click(updateScore);

这将为您提供更清晰的代码，这些代码将来会对您有所帮助。

我从HTML中删除了onclick属性，并使用了jquery的.click()方法，该方法将预定义函数作为参数。单独的功能更清晰，更易于重复使用。

我已将HTML数据定义为数据属性，这是一种以HTML格式存储数据的更好方法。可以使用jquerys data()方法访问它。您可以在数据属性中添加您喜欢的任何数字，这样就不需要在javascript中使用转换数组。

我们还在jquery中使用$(this)构造来引用触发事件的元素（在本例中为click事件）

Jquery在单击时更改数组中的span标记内容

2 个答案: