3

Ok。まず、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

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スクリプトにがありません：

$(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 に答える
1

ここにはいくつかの問題があります。

  1. にを持っている<span>が、<ul>にないこと<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 に答える
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 に答える
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に関連付けられたスパンをそれぞれ個別に保持する必要があります

同じIDが対応するulliのアンカーのrelに記載されます

于 2012-05-10T19:53:11.763 に答える
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

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の直接の子になることはできませんが、.amountLI内でそれを望んでいたと思います。

("ul.stag li")がありません$。

activePd.html()activePdこれは変数（文字列）であり、Jqueryオブジェクトではないため、である必要があります。

おそらく、ユーザーにタグをクリックしてもらいたいが、リンクをたどらないようにする必要があるため、イベントを渡し、クリック機能でのデフォルトの動作を防ぐ必要があります。

最後に、クリックイベントをLIに割り当てますが、適切な方法は、クリックイベントをhtmlクリック可能要素 aに直接割り当てることです。これにより、コード行が節約され、コードがより正確になります。

JqueryとHTMLタグについてもっと読む！幸運を。

于 2012-05-10T20:02:16.843 に答える