Переключите текст на теге кнопки
У меня есть шоу, скрывают функцию строк таблицы, но теперь хотел бы изменить мой текст.
<script language="javascript" type="text/javascript">
function HideStuff(thisname) {
tr = document.getElementsByTagName('tr');
for (i = 0; i < tr.length; i++) {
if (tr[i].getAttribute('classname') == 'display:none;') {
if (tr[i].style.display == 'none' || tr[i].style.display=='block' ) {
tr[i].style.display = '';
}
else {
tr[i].style.display = 'block';
}
}
}
}
HTML следующие...
<button id="ShowHide" onclick="HideStuff('hide');>Show/Hide</button>
Я хочу переключить "Показать/Скрыть" текст. Какие-либо идеи?
4 ответа
Используйте jQuery, что-то вроде этого может сработать:
$('ShowHide').click(function(){
if ( $('hide').css('display') == 'block' )
$('ShowHide').val("Hide");
else
$('ShowHide').val("Show");
});
Я просто написал это из головы, так что вам, возможно, придется сделать некоторые изменения, вы можете прочитать больше о css jquery api здесь. И все, что я сделал, это использовал анонимные функции
Я бы рекомендовал использовать jquery, но вы можете просто использовать метод javascript document.getElementById
в вашей функции:
function HideStuff(thisname) {
tr = document.getElementsByTagName('tr');
for (i = 0; i < tr.length; i++) {
if (tr[i].getAttribute('classname') == 'display:none;') {
if (tr[i].style.display == 'none' || tr[i].style.display == 'block') {
tr[i].style.display = 'none';
}
else {
tr[i].style.display = 'block';
}
}
}
if (document.getElementById("ShowHide").value == "show") {
document.getElementById("ShowHide").value = "hide";
}
else {
document.getElementById("ShowHide").value = "show";
}
}
Хотя, я бы, вероятно, передал this вместо текста 'hide' в вызове функции. тогда вы можете сделать это, как сказал zaph0d. Тогда будет немного чище.
Не уверен, почему вы передаете это имя в JS, поскольку оно в настоящее время не используется.
Если вы измените вызов на:
<button id="ShowHide" onclick="HideStuff(this)">Show</button>
, а затем в js, вы можете довольно легко изменить текст:
if (this.value == 'Show') {
this.value = 'Hide'
}
else {
this.value = 'Show';
}
$('#HideShow').click(function()
{
if ($(this).text() == "Show")
{
$(this).text("Hide");
}
else
{
$(this).text("Show");
};
});
В качестве альтернативы .toggle () имеет .toggle (четный, нечетный); функциональность, использование которой когда-либо имеет для вас наибольший смысл; один - это немного более короткий код, но, возможно, менее определенный.
$('#HideShow').toggle(function()
{
$(this).text("Hide");
HideClick('hide');
},
function()
{
$(this).text("Show");
HideClick('hide');
}
);
ПРИМЕЧАНИЕ: вы можете включать любые другие действия, которые хотите, в функцию () по мере необходимости, и вы можете исключить onclick в разметке / html, вызвав там свой вызов функции HideClick (). как я демонстрирую во втором примере.
В качестве продолжения и в качестве альтернативы вы можете добавить класс CSS в свой CSS
.hideStuff
{
display:none;
}
ЗАТЕМ добавить это в:
.toggle('.hideStuff');
или, точнее, в соответствующее место.
.addClass('.hideStuff');
.removeClass('.hideStuff');