3

好的。首先让我说我刚开始学习 jQuery，我已经接受了各种挑战，所以我可以学得更快。今天，我有一个非常新手的问题，如果答案很明显，请道歉。我正在使用 JQuery 在单击相应列表时显示特定值。

我不知道我做错了什么。基本上，我创建了一个无序列表，我想要实现的是，如果单击每个链接，更改应该特定于每个列表项的跨度值（因此每个列表项将具有不同的跨度值）。但是下面的脚本不起作用。关于我做错了什么或我应该做什么的任何想法？： -

<ul class="stag">
    <li><a class="$200" href="#d1">Display</a></li>
    <li><a class="$300" href="#d2">Shirt</a></li>
    <li><a class="$400" href="#d3">Dress</a></li>
    <li class="amount"></li>
    **<span>$200</span>**
</ul>

这是 jQuery 代码：-

 $(document).ready(function() {
      ("ul.stag li").click(function(){
        var activePd = $(this).find("a").attr("class");    //the clicked list
        $(".stag span").html(activePd.html());
            return false; 

       });
    });

任何人都可以帮忙吗？多谢你们 ：）

4

10 回答 10

5

类名必须以从 a 到 Z 的字符开头。您以美元符号开头，因此您的类名无效。您必须找到其他存储<a>元素值的方法。这是您脚本的一个更好的版本，我使用data属性而不是class存储您的值：

HTML：

<ul class="stag">
    <li><a data-cost= "$200" href="#d1">Display</a></li>
    <li><a data-cost ="$300" href="#d2">Shirt</a></li>
    <li><a data-cost ="$400" href="#d3">Dress</a></li>
    <li class="amount"></li>
    <li><span>$200</span></li>
</ul>​

Javascript：

$(document).ready(function() {
    $("ul.stag li").click(function() {
        var activePd = $(this).find("a").data("cost"); //the clicked list
        $(".stag li span").html(activePd);
        return false;
    });
});​

同样重要的是你不能调用.html()一个字符串（这就是什么activePd），你甚至不需要，因为它已经是你想要的值。

此外，就像 Rocket 在下面的评论中指出的那样，您不能<span>在<ul>. 我暂时将其放入<li>并相应地更改了 jQuery 选择器。

于 2012-05-10T19:45:41.737 回答
1

这里有很多问题。

  1. 在 a<span>中有 a<ul>但不在 an<li>中是无效的。
  2. 类名不能以 开头$，也不能用于存储数据。尝试使用data-*属性。
  3. activePd是一个字符串，而不是一个 jQuery 对象，所以.html()不需要。
  4. 你忘记了$以前("ul.stag li").click

您的 HTML 应如下所示：

<ul class="stag">
    <!-- The price is stored in a data attribute -->
    <!-- that's an HTML5 feature, but all browsers support it -->
    <li><a data-price="$200" href="#d1">Display</a></li>
    <li><a data-price="$300" href="#d2">Shirt</a></li>
    <li><a data-price="$400" href="#d3">Dress</a></li>
    <!-- The only valid children of ULs are LIs -->
    <li class="amount"><span>$200</span></li>
</ul>​

你的 jQuery 应该是这样的：

$(document).ready(function () {
     $("ul.stag li").click(function () {
         // jQuery can read data- attribures using .data
         var activePd = $(this).find("a").data("price");
         // The span has been moved to a new spot
         $(".stag .amount span").html(activePd);
         return false;
     });
 });

演示：http: //jsfiddle.net/cUb9e/

于 2012-05-10T19:54:51.843 回答
1

activePd 是一个字符串，所以你不要在它上面调用 .html() ：

$(".stag span").html(activePd);

此外，您可以使其更简单：

$(document).ready(function() {
  $("ul.stag li a").click(function(){
    var activePd = $(this).attr("class");    //the clicked list
    $(".stag span").html(activePd);
    return false; 
   });
});
于 2012-05-10T19:45:43.037 回答
1

首先，您在$jQuery 的第一行缺少 jquery。

你的：

$(document).ready(function() {
    ("ul.stag li").click(function(){

新的：

$(document).ready(function() {
    $("ul.stag li").click(function(){
于 2012-05-10T19:46:40.550 回答
1

您$的 jQuery 脚本中缺少 a ：

$(document).ready(function() {
here --> $("ul.stag li").click(function(){
             var activePd = $(this).find("a").attr("class");
             $(".stag span").html(activePd.html());
             return false; 
         });
});
于 2012-05-10T19:48:25.387 回答
0 
$(document).ready(function() {
  ("ul.stag li").click(function(){
    var activePd = $(this).find("a").attr("class");    //the clicked list
    $(".stag span").html(activePd.html());
        return false; 

   });
});

删除 activePd.html() 并添加

$(".stag span").html(activePd);

如果使用 JQuery，则 activePd 并在单击事件中添加一个 $。

于 2012-05-10T19:58:38.907 回答
0

检查 jquery 的变化

$(document).ready(function() {
      $("ul.stag li a").click(function(){
        var activePd = $(this).attr("class"); 
        var rel=$(this).attr("rel"); 
        $("span[id='stag-"+rel+"']").html(activePd);
            return false; 

       });
    });

请注意 HTML 已更改

<ul class="stag">
    <li><a class="$200" href="#d1" rel="1">Display</a></li>
    <li><a class="$300" href="#d2" rel="1">Shirt</a></li>
    <li><a class="$400" href="#d3" rel="1">Dress</a></li>
    <li class="amount"></li>
</ul>
<span id="stag-1">$200</span>

您必须将跨度分开，每个都与某些特定的 id 相关联

对应的ul li的anchor的rel中会提到相同的id

于 2012-05-10T19:53:11.763 回答
0

这是一个工作示例，其中包含一些关于您的 HTML 和 JS 代码的固定问题：Fiddle

HTML

<ul class="stag">
    <li>
        <a class="$200" href="#d1" title="">Display</a>
    </li>
    <li>
        <a class="$300" href="#d2" title="">Shirt</a>
    </li>
    <li>
        <a class="$400" href="#d3" title="">Dress</a>
    </li>
    <li class="amount">
        <span>$200</span>
    </li>
</ul>

JS

$(".stag a").bind("click", function(e) {
  // the clicked list
  var activePd = $(this).attr("class");
  $(".amount").html(activePd);
  e.preventDefault();
});

你错过了什么：

<span>不能是 UL 的直系子代，但我相信您希望它包含在 .amount LI 中。

("ul.stag li")缺少$.

activePd.html()应该是activePd，因为它是一个变量（字符串）而不是一个Jquery Object。

您可能希望用户单击 a 标签但阻止链接被跟踪，因此您需要传递事件并阻止其在click 函数上的默认行为。

最后，您将点击事件分配给 LI，但正确的方法是将其直接分配给html clickable element a，从而节省一些代码行并使您的代码更准确。

阅读更多关于Jquery和HTML 标签的信息！祝你好运。

于 2012-05-10T20:02:16.843 回答
0

这是一个可行的解决方案：http: //jsfiddle.net/jn7P7/5/

缺少的是$以前("ul.stag > li")

如前所述activePd是一个字符串，不需要做.html()

<ul class="stag">
    <li><a class="$200" href="#d1">Display</a></li>
    <li><a class="$300" href="#d2">Shirt</a></li>
    <li><a class="$400" href="#d3">Dress</a></li>
    <li class="amount"></li>
    <span>$200</span>
</ul>​

JS 

$("ul.stag > li").click(function() {

    var activePd = $(this).find("a").attr("class"); //the clicked list
    console.log(activePd);
    $(".stag span").html(activePd);
    return false;

});​
于 2012-05-10T19:49:09.550 回答
0

$不是 html 类名中的有效字符，并且由于您似乎更多地将类属性用作数据容器，因此我建议您切换到该data属性。那将<li><a data-price="$200" href="#d1">Display</a></li>在您的标记和$(this).data('price')jQuery 中。

于 2012-05-10T19:51:59.677 回答