DEMO

Question

我只想创建一些单击时隐藏或显示项目下方文本的内容。我的问题是＆＃34;当点击+时，如何将|符号更改为h1符号。代码：

HTML：

<h1>+ Welcome</h1>
<p>This is the welcome greeting</p>

CSS：

p {
    display: none; 
}

JavaScript：

$( "h1" ).click(function() {
    if ($('p').is(':visible')){
        $('p').hide();              
    } else {
        $('p').show();      
    }
});

JsFiddle

Answer 1

由于它是h1点击的，因此您可以在功能中使用$(this)。

$( "h1" ).click(function() {
    if ($('p').is(':visible')){
        $('p').hide();
        $(this).text('+ Welcome');
    } else {
        $('p').show();
        $(this).text('| Welcome');    
    }
});

DEMO

Answer 2

您应该将+放入元素并进行更改：

HTML

<h1><span>+</span> Welcome</h1>
<p>This is the welcome greeting</p>

的jQuery

$( "h1" ).click(function() {
    if ($('p').is(':visible')){
        $('p').hide();
        $(this).find('span').text('+');
    } else {
        $('p').show();
        $(this).find('span').text('|');      
    }
});

jsFiddle Demo

Answer 3

尝试使用::before伪元素：

<div class="wrapper">
    <h1>Welcome</h1>
    <p>This is the welcome greeting</p>
</div>

.wrapper > h1:before {
  content: '|';
}
.wrapper.hide > h1:before {
  content: '+';
}
.wrapper.hide > p {
    display: none;
}

$(".wrapper").addClass('hide').each(function() {
    var $wrapper = $(this);
    $wrapper.children('h1').on('click', function() {
        $wrapper.toggleClass('hide');
    });
});

Demo

Answer 4

您可以使用.text()（doc）

访问代码的内容

$( "h1" ).click(function() {
    if ($('p').is(':visible')){
        $('p').hide();
        $(this).text("+ Welcome");
    } else {
        $('p').show();
        $(this).text("| Welcome");
    }
});

然而，正如其他人指出的那样，如果您将特殊字符移动到其自己的<span>元素中，这会更容易。另外，请考虑为要与之互动的元素提供id，因为$("p")会匹配所有页面中的p元素。

Answer 5

尝试将＆＃34; +＆＃34;在其内部<span>标记。

<强> HTML：

<h1> <span id='symbol' class="plus">+</span> Welcome </h1>

<强> jQuery的：

$("h1").click(function(){
    var span = $("#symbol");

    if(span.hasClass("plus")){
        span.html("|");
        span.removeClass("plus");
        span.addClass("pipe");
    }else{
        span.html("+");
        span.removeClass("pipe");
        span.addClass("plus");
    }
});

希望它有所帮助！

Answer 6

DEMO

这是您的代码

HTML

<h1><span>+</span> Welcome</h1>
<p>This is the welcome greeting</p>

的JavaScript

$( "h1" ).click(function() {
    if ($('p').is(':visible')){
        $('p').hide();
        $(this).find('span').text('+');
    } else {
        $('p').show();      
        $(this).find('span').text('|');
    }
});

Answer 7

如果您不想更改标记并希望能够灵活地更改h1中的其他文本而无需修改JavaScript，那么使用JavaScript replace函数可能是另一种选择。

$( "h1" ).on('click', function() {
    var heading = $(this).html();
    if ($('p').is(':visible')){
        $('p').hide();
        $(this).html(heading.replace('|', '+')); 
    } else {
        $('p').show();
        $(this).html(heading.replace('+', '|')); 
    }
});

将加号（+）更改为条形（|）符号

JsFiddle

7 个答案:

DEMO

HTML

的JavaScript