1

我有一个国家列表，它们都有一个空的“#”锚链接。

我坚持告诉 JQuery 只将一个国家“复制”到一个空的 div，但 JQuery 选择了 div 内的所有“#”链接。

请参阅 JS Fiddle 链接：http: //jsfiddle.net/michelm/yb7MR/

这就是我所做的：

var country = $('a[href$="#"]').text();


$('a[href$="#"]').click(function () {
  event.preventDefault();

  $(this).addClass("active");

  if ($('a').hasClass("active")) {

    $('div.location').prepend('<p>Your Location is: </p>');
    $('div.location').text(country);
    $(this).removeClass("active");

  } else {
    $('a[href$="#"]').removeClass("active");

    $('a[href$="#"]').not("active");

    // do nothing

  }

});

<body>
    <a href="#">France</a><br />
    <a href="#">Italy</a><br />
    <a href="#">Spain</a><br />
    <a href="#">Germany</a><br />

    <div class="location"></div>
</body>

谢谢

4

7 回答 7

2

删除此行 $('div.location').text(country);

您可以使用选择单击元素$(this).text()的文本并将该文本设置为 div

像这样$('div.location').text($(this).text());

http://jsfiddle.net/viswa317/359Qq/

于 2013-01-05T06:33:45.873 回答
2

.active通过使用
.not()选择器摆脱点击

http://jsfiddle.net/ZLUNX/1/

$('a[href$="#"]').not('.active').click(function ( event ) {

    event.preventDefault();

    $(this).addClass("active").siblings().removeClass('active');
    $('div.location').html('<p>Your Location is: '+ $(this).text() +'</p>');

});

http://api.jquery.com/not-selector/
http://api.jquery.com/event.preventDefault/
http://api.jquery.com/siblings/

于 2013-01-05T06:48:03.327 回答
1

使用以下代码。

$('a[href$="#"]').click(function (e) {  
    e.preventDefault();  
    jQuery('a').removeClass('active');
    jQuery(this).addClass('active');
    $('div.location').html('<p>Your Location is: </p>' + jQuery(this).text());
});
于 2013-01-05T06:29:38.063 回答
1

目前，您将 country 变量设置为每个<a>标签的所有文本值，其 href 值为#. 此外，您可能想重新考虑您的代码，因为您将类设置在语句active之前，您将永远不会被调用。您当前代码的另一个问题是您将被. 话虽如此，我已经在问题旁边发表了评论，并将国家变量放在了它可以去的地方，并向您展示了如何访问正确的文本值。if elseelse.prepend().text()

$('a[href$="#"]').click(function (event) {  
    event.preventDefault();     

    $(this).addClass("active"); //This will cause the else statement below to never do anything

    if ($('a').hasClass("active") ) {           
        $('div.location').prepend('<p>Your Location is: </p>'); //This will be overridden later by the .text()
        var country = $(this).text(); //Set the country variable here, using the current text value for the element that triggered this event
        $('div.location').text(country);
        $(this).removeClass("active");
    } else { //Because of the addClass above this will never do anything!
        $('a[href$="#"]').removeClass("active");

        $('a[href$="#"]').not("active");

        // do nothing

    }
});

示例：http: //jsfiddle.net/fewds/yb7MR/3/

于 2013-01-05T06:32:15.223 回答
1

我不知道我是否正确理解了你的问题。我觉得你需要改变

$('div.location').text(country);

至

$('div.location').text($(this).text());

请检查这个小提琴。

于 2013-01-05T06:36:36.600 回答
1

var country您已经为之前分配了值，$('a[href$="#"]').click(function (event)因此它获取所有链接值。所以var country在点击事件之后分配值并分配值$(this).text()所以它将获取链接值并添加到div。

谢谢

于 2013-01-05T06:48:16.733 回答
0

只需这样使用它：http: //jsfiddle.net/RKAHR/

 $('a[href$="#"]').click(function (e) {
  var country = $(this).text();
  e.preventDefault();
  $('a[href$="#"]').removeClass("active");
  $(this).addClass("active");

  $('div.location').prepend('<p>Your Location is: </p>');
  $('div.location').text(country);
});
于 2013-01-05T06:33:56.950 回答