Question

确定。首先让我说我刚刚开始学习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; 

       });
    });

有人可以帮忙吗？谢谢你们:)）

Answer 1

班级名称必须以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选择器。

Answer 2

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; 
   });
});

Answer 3

首先，你在jQuery的第一行找不到$ jquery。

此致：

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

新：

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

Answer 4

您在jQuery脚本中缺少$：

$(document).ready(function() {
here --> $("ul.stag li").click(function(){
             var activePd = $(this).find("a").attr("class");
             $(".stag span").html(activePd.html());
             return false; 
         });
});

Answer 5

这里有很多问题。

<span>中<ul>但<li>中没有$无效。
类名不能以data-*开头，也不能用于存储数据。尝试使用activePd属性。
.html()是一个字符串，而不是jQuery对象，因此不需要$。
您忘记了("ul.stag li").click

<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>

您的HTML应如下所示：

$(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;
     });
 });

你的jQuery应该是这样的：

{{1}}

DEMO：http://jsfiddle.net/cUb9e/

Answer 6

这是一个有效的解决方案：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;

});

Answer 7

$不是html类名中的valid character，因为您似乎更多地使用class属性作为数据容器，我建议您切换到data属性。这将是您标记中的<li><a data-price="$200" href="#d1">Display</a></li>和jQuery中的$(this).data('price')。

Answer 8

检查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的锚点

的rel中将提到相同的id

Answer 9

$(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);

activePd，如果使用JQuery，则在click事件中添加$。

Answer 10

以下是一个有关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的直接孩子，但我相信你想要它在里面。赞.LI。

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

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

您可能希望用户点击该标记但阻止该链接被关注，因此您需要传递该事件并阻止其default behavior上的click function。

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

详细了解Jquery和HTML tags！祝你好运。

简单的jquery代码。我不知道我做错了什么

10 个答案: