С JQuery Я добавляю DIV и добавление текста «нажмите для просмотра», когда DIV является showin Я хотел бы изменить этот текст «нажмите, чтобы закрыть»Заменить прилагаемый текст с новым текстом на Щелке

Right Теперь у меня есть

$('#toggle_template') 
    .css('cursor','pointer') 
    .append(' (click to view)') 
    .click(function(){$('#template').toggle(500); 
      $('#toggle_template').find(' (click to view)').replaceWith(' (click to close)');});

с HTML:

<div id ="toggle_template">This is a section header</div> 
<div id="template"> 
Junk to show hide on click 
</div>

ДИВ показывает и правильно скрывая и текст «нажмите для просмотра» добавляется. Я не могу найти способ использовать jquery для удаления прилагаемого текста, который я пробовал .remove(click to view).append(click to close), и это не сработало. Я уверен, что смогу обернуть этот текст в промежутке, а затем добавить удаление или изменить класс, но должен быть более простой способ.

Любые идеи о том, как изменить этот текст?

источник

2010-10-04 BandonRandon

В текущих кодов, это может быть сделано, как это,

$('#toggle_template').css('cursor', 'pointer') 
.append(' (click to view)') 
.click(function() { 
    $('#template').toggle(500); 
    $('#toggle_template').html(function(i, html) { 
     if (html.indexOf(' (click to view)') > 1) { 
      return html.replace(' (click to view)', ' (click to close)'); 
     } 
     return html.replace(' (click to close)', ' (click to view)'); 
    }); 
});

crazy demo

источник

2010-10-04 05:28:30 Reigel

Возможно, это не самый простой способ сделать это (в общем), но он работает с моим кодом без дополнительных интервалов или классов. Спасибо! – BandonRandon

, если вы хотите попробовать дополнительные 'span', [смотрите здесь] (http://jsfiddle.net/h3HbT/). – Reigel

Спасибо, что кажется более простым, и вы заменяете только одно слово, которое теоретически должно быть быстрее. – BandonRandon

с использованием span проще ИМО.

но вы можете сделать это с помощью регулярных выражений и согласования/замен (нажмите для просмотра) с (нажмите, чтобы закрыть)

Я также изменил щелчок к тумблеру и обработал изменение текста обратно и скрытие и показ #template

Вот пример: http://jsbin.com/ixigi3/3

пасты Также здесь:

<!doctype html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 

    </style> 
</head> 
<body> 

<div id ="toggle_template">This is a section header</div> 
<div id="template"> 
Junk to show hide on click 
</div> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#template').hide(); 
     $('#toggle_template') 
      .css('cursor','pointer') 
      .append(' (click to view)') 
      .toggle(function(){ 
       $('#toggle_template').html($('#toggle_template').html().replace(/view\)/i, "close)")); 
       $('#template').show(500); 
       }, 
       function(){ 
       $('#toggle_template').html($('#toggle_template').html().replace(/close\)/i, "view)")); 
       $('#template').hide(500); 
      }); 
    }); 
</script> 
</body> 
</html>

источник

2010-10-04 05:19:17

eek! Regex. Я думаю, что буду использовать пролет. Я просто очень новичок в jquery и не уверен, что это лучший способ сделать это. Должен ли я использовать 'replaceWith', тогда просто меняйте текст взад и вперед по щелчку? – BandonRandon

смотрите здесь: http://jsbin.com/ixigi3/3 –

вы можете использовать .html(''), это освободит содержимое div.

("#divid").html("");

источник

2010-10-04 05:22:55 kobe

вы можете даже использовать .text(), чтобы изменить содержимое div ... tag – kobe

Если я использовал '.html ('')' it удаляет ссылку: «.text» работает лучше, но мне нужно вставить весь html и добавить текст вручную. – BandonRandon

Это один из способов:

var t = $('#toggle_template').text(); 
$('#toggle_template').text(t.replace(/ \(click to view\)/, ' (click to close)'));

... но вы будете требуется больше логики для изменения текста.

Как уже упоминалось, было бы лучше включить другие элементы, которые вы можете показать/скрыть во всей полноте, а не динамически изменять контент таким образом. Вы даже можете сделать это полностью с помощью css, просто переключив класс на свой toggle_template div и используя псевдо-элемент css 'after'.

источник

2010-10-04 05:29:23 sje397

Заменить прилагаемый текст с новым текстом на Щелке

ответ

crazy demo

Смежные вопросы