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

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

//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;
     }

//html代码
我的观点
我的观点

text2

text2

text2

文本2

text2

text2

//javascript代码
var titl=['我的观点'，
“text2”，
“text3”，
"text4",，
“文本5”，
"text6",，
“文本7”
];
功能（pin）{
如果（pin=“2”）{
它=1；
}
否则，如果（pin=“一”）{
它=0；
}
否则，如果（pin=“三”）{
它=2；
}
否则，如果（pin=“四”）{
它=3；
}
否则，如果（pin=“五”）{
它=4；
}
否则，如果（pin=“六”）{
它=5；
}
否则，如果（pin=“七”）{
它=6；
}
document.getElementById（“u”）.innerHTML=titl[it；
}

类和id中有U的错误，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];
     }

//html代码
我的观点
我的观点

text2

text2

text2

文本2

text2

text2

//javascript代码
var titl=['我的观点'，
“text2”，
“text3”，
"text4",，
“文本5”，
"text6",，
“文本7”
];
功能（pin）{
如果（pin=“2”）{
它=1；
}
否则，如果（pin=“一”）{
它=0；
}
否则，如果（pin=“三”）{
它=2；
}
否则，如果（pin=“四”）{
它=3；
}
否则，如果（pin=“五”）{
它=4；
}
否则，如果（pin=“六”）{
它=5；
}
否则，如果（pin=“七”）{
它=6；
}
document.getElementById（“u”）.innerHTML=titl[it]；
}

试试这个：

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

这就为您留下了更干净的代码，这些代码在将来会对您很好

我已经从HTML中删除了

onclick

属性，并使用了jquery的方法，该方法将预定义函数作为参数。单独的函数更清晰，更可重用

我已经将HTML数据定义为数据属性，这是以HTML存储数据的一种更好的方法。可以使用jquerys方法访问它。您可以在数据属性中输入任何您喜欢的数字，因此不需要在javascript中使用转换数组

---

我们还在jquery中使用

$（this）

构造来引用触发事件的元素（在本例中是单击事件）

javascript部分中的错误是什么

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