Заменить добавленный текст новым текстом при нажатии - PullRequest
Новая
       9

Заменить добавленный текст новым текстом при нажатии

0 голосов
/ 04 октября 2010

С помощью jquery я добавляю div и добавляю текст «нажмите, чтобы посмотреть», когда div показывает, я хотел бы изменить этот текст на «щелкнуть, чтобы закрыть»

Сейчас у меня есть 

$('#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>

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

Есть идеи, как изменить этот текст?

Ответы [ 4 ]

1 голос
/ 04 октября 2010

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

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

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

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

1 голос
/ 04 октября 2010

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

$('#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)');
    });
});​

безумная демоверсия

1 голос
/ 04 октября 2010

с использованием 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>
0 голосов
/ 04 октября 2010

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

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