2013-10-24 2 views
0

У меня есть этот HTML код:Изменить якорный текст и значок с помощью Jquery самозагрузки

<a class="btn pull-left" id="btnSelectAll"><i class="icon-plus"></i> 
    Select All 
</a> 

Когда я нажимаю кнопку, мне нужно, чтобы переключить текст «Deselect All», а также изменить класс <i> к " icon-minus ", для каждого щелчка должен измениться один или другой. Я попытался переключиться на якорь, но не работал. Я не хочу жестко кодировать текст, потому что он может быть на другом языке.

Вот что я пробовал:

$("#btnSelectAll").click(function() { 
    var $this = $(this); 
    $this.toggleClass('show'); 

    if ($this.hasClass('show')) { 
     $this.text('@L.GetLanguageText("DeselectAll")'); 
     $($this +'> i').addClass('icon-minus'); 
    } else { 
     $this.text('@L.GetLanguageText("SelectAll")'); 
     $($this + '> i').addClass('icon-plus'); 
    } 
}); 

, но это не меняет значок.

+0

показать нам, что вы пробовали. –

ответ

1

Просто не хватает нескольких корректировок CSS, jsfiddle.

ЯШ:

var alterIcon = function() 
{ 
    $("#btnSelectAll").click(function() { 
     var icon = $(this).children("i"), 
      text = $(this).text(); 

     $(this).text(text == "Deselect All" ? "Select All" : "Deselect All"); 
     $(this).prepend(icon.toggleClass('glyphicon-thumbs-up glyphicon-thumbs-down')); 
    }); 
} 
alterIcon(); 

Надежда эта помощь.

+0

огромное спасибо всем! – rgx71

0

Посмотрите на эту скрипку: http://jsfiddle.net/YDqZW/

HTML:

<a class="btn pull-left" id="btnSelectAll"><i class="icon-plus"></i> 
    Select All 
</a> 

ЯШ:

$('#btnSelectAll').on('click', function() { 
    var notice = 'Select All'; 

    if ($('#btnSelectAll').text().trim() == notice) { 
      notice = 'Deselect All'; 
    } 

    $('#btnSelectAll').find('i').toggleClass('icon-plus icon-minus').parent().contents().last()[0].textContent = notice; 
}); 
+0

Я не хочу жестко кодировать текст, потому что он может быть на другом языке – rgx71

+0

Где вы планируете читать текст на языке? –

+0

Текст исходит из базы данных – rgx71

0

Попробуйте это для размера:

$("#btnSelectAll").on("click", function() { 
    x = $(this).children()[0]; 
    $(this).text().trim() == "Select All" ? $(this).text("Deselect All").prepend(x) : $(this).text("Select All").prepend(x); 
    $($(this).children()[0]).toggleClass("icon-plus icon-minus"); 
}); 
Смежные вопросы