Question

我有这段代码

＆＃13;

	$('a').click(function() {
		$('a span').first().addClass('hide');
 		$('a span:nth-child(2)').removeClass('hide');
                $('a span:nth-child(2)').addClass('display');
	});

＆＃13;

.hide {
  display:none;
 }

.display {
  display:block;
 }

＆＃13;

<a href="#">
  <span>Hello</span>
  <br>
  <span class="hide">World</span>
</a>

＆＃13;

当我点击链接时，我想要第一个跨度隐藏，并出现第二个跨度。

我想多次这样做（点击此链接可以倍增次数并获得相同的结果）。

我尝试使用此Jquery代码

Answer 1

我只想切换课程并且您必须阻止链接上的默认值，以便它不会尝试离开页面。

$('a').click(function(e) {
    e.preventDefault();
    $('a span').toggleClass('hide show');
});

这是一个work demo

Answer 2

我会做这样的事情。循环遍历a的子项并交换它们的类。使用此方法可以执行其他操作以及只需切换类，例如将text / css属性添加到span。

$('a').click(function() {
    $(this).children().each(function(index, element)
    {
        if ($(this).hasClass('hide'))
        {
            $(this).removeClass('hide');
            $(this).addClass('display');
        }
        else
        {
            $(this).removeClass('display');
            $(this).addClass('hide');
        }
    });
});

以上代码的JS Fiddle

Answer 3

这应该可以满足您的需求：

HTML：

<a class='hide-clicker' href="#">
  <span>Hello</span>
  <span class="hide">World</span>
</a>

jquery的：

$("a.hide-clicker").click(function(e) {
  e.preventDefault();
  $(this).find('span').toggleClass('hide');
});

CSS：

.hide {
  display:none;
}

单击Jquery更改范围

3 个答案: