Question

我有一个点击功能来更改文本...在两个span标签中。但问题是我点击第二个跨度。。第一个跨度文本正在更改。。当我单击跨度时，其中的文本只应该更改。。。将来我会增加更多的跨度。。所以它应该也适用于此。。需要更改代码，以便它可以分别适用于所有范围。

HTML

<h2 class = "trigger">2012-2013
<span id="element1" onClick="javascript:changeText(1);">[+]</span></h2>
 <div class = "toggle">
 <h4>Annual Report (2012-2013)</h4>

<h2 class = "trigger">2013-2014
<span id="element2" onClick="javascript:changeText(3);">[+]</span></h2>
 <div class = "toggle">
 <h4>Annual Report (2013-2014)</h4>

JS

function changeText(idElement) {
var element = document.getElementById('element' + idElement);
if (idElement === 1 || idElement === 2) {
    if (element.innerHTML === '[+]') element.innerHTML = '[-]';
    else {
        element.innerHTML = '[+]';
    }
}
}

function changeText(idElement) {
var element = document.getElementById('element' + idElement);
if (idElement === 3 || idElement === 2) {
    if (element.innerHTML === '[+]') element.innerHTML = '[-]';
    else {
        element.innerHTML = '[+]';
    }
}
}

触发功能：

$('.trigger').next('.toggle').hide();
$('.trigger').click(function() {
var el = $(this).next('.toggle');
var doit = (el.is(':visible')) ? el.slideUp() : ($('.toggle').slideUp()) (el.slideDown());
});

FIDDLE

MY FIDDLE

Answer 1

因为两者都具有相同的ID element1

getElementById()方法访问具有指定标识的第一个元素。

使用
的 HTML

<span id="element1" onClick="javascript:changeText(this.id);">[+]</span>

<强>脚本

function changeText(eleId) { var element = document.getElementById(eleId); if (element.innerHTML === '[+]') { element.innerHTML = '[-]'; } else { element.innerHTML = '[+]'; } }

http://jsfiddle.net/sH9B6/3/

Answer 2

您不能拥有两个具有相同功能的不同功能。将功能组合到一个功能中。此外，元素的“id”必须是唯一的。请改变它。

function changeText(idElement) {
 var element = document.getElementById('element' + idElement);
 if (idElement === 1 || idElement === 2 || idElement === 3) {
    if (element.innerHTML === '[+]') {
        element.innerHTML = '[-]';
    }
    else {
        element.innerHTML = '[+]';
    }
 }
}

Answer 3

你可以像这样更新：

<强> HTML

<span onclick="changeText(this);">[+]</span>

<强> JS

function changeText(el) {
  var p = "[+]", m = "[-]", txt = p;
  if (p === el.innerHTML) {
    txt = m;
  }
  el.innerHTML = txt;
}

Answer 4

如果您只想更改+和-之间的跨度状态，那么您可以使用this使其适用于所有这些状态，您不需要实际上甚至需要一个id ..

<span onClick="changeText(this);">[+]</span>


function changeText(element) {
if (element.innerHTML === '[+]')
 element.innerHTML = '[-]';
else
    element.innerHTML = '[+]';
}

检查此JSFiddle

<强>更新

根据更新，Fiddle带幻灯片

使用Onclick - 单独更改文本

4 个答案: