crazy demo

Question

使用jquery我正在添加div并在div显示时附加文本“click to view”我想将该文本更改为“click to close”

现在我有

$('#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)的附加文本，但这不起作用。我确定我可以在一个范围中包装这个文本，然后添加删除或更改类，但应该有一个更简单的方法。

有关如何更改此文字的任何想法？

Answer 1

使用span更容易IMO。

但你仍然可以通过使用正则表达式和匹配/替换（点击查看）来实现（点击关闭）

我还将点击更改为切换并处理了更改文本以及隐藏和显示#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>

Answer 2

在您当前的代码中，可以这样做，

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

Answer 3

这是一种方式：

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

...但你需要更多的逻辑来改变文本。

如上所述，最好包含您可以完整显示/隐藏的其他元素，而不是像这样动态修改内容。您甚至可以完全使用css，只需在toggle_template div上切换一个类并使用css 'after'伪元素。

Answer 4

你可以使用.html('')，这将清空div内容。

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

在Click上用新文本替换附加文本

4 个答案:

crazy demo