3

私は次のものを持っています:

ここに画像の説明を入力してください

Javascript:

$(".bg .thumb_wrapper").click(function() {
    $(".bg .thumb_wrapper").removeClass("active");
    $(this).addClass("active");
});

したがって、新しい背景をクリックするたびに、その背景が強調表示され、「アクティブ」クラスが与えられ、前のアクティブなクラスが削除されます。

これで、変数を作成して、そのアクティブなアイテムのdata-name属性に設定するだけです。

HTMLは次のとおりです。

<div class="thumb_wrapper active">
    <img src="images/backgrounds/thumb/bg2.jpg" data-name="bg2.jpg">
</div>

したがって、クリック機能に入れると、正常に機能します。

var bg = $(".bg .thumb_wrapper.active img").attr("data-name");
console.log(bg);

クリックするたびに値が表示されます。ただし、その関数の外部でその変数にアクセスする必要があるため、グローバルである必要があります。

クリック機能ではなく、ページの先頭でdata-nameの値を取得するためにできることはありますか?そして、新しいBGをクリックしてアクティブなクラスが更新されると、変数も更新されますか?

それが理にかなっていることを願っています。

ありがとう!

4

5 に答える 5

1

関数の外部で変数を宣言して、そのスコープがクリックハンドラーに限定されないようにします。

var bg;

$(".bg .thumb_wrapper").click(function() {
   $(".bg .thumb_wrapper").removeClass("active");
   $(this).addClass("active");
   bg = $(".bg .thumb_wrapper.active img").data("name");
});

console.log(bg); //accessible outside

bg新しいBGがクリックされるたびにの値を更新する場合は、上記のようにクリックハンドラーで割り当てを行う必要があります。

実例

于 2012-04-09T19:07:19.643 に答える
0

あなたがしなければならないのは、クリックハンドラーの外で、おそらくおそらく内で変数を定義することですが$(document).ready()、さまざまなクリックハンドラー(またはあなたが使用している他のハンドラー)でそれを更新します:

$(document).ready(function(){
var bg = $(".bg .thumb_wrapper.active img['data-name']").attr("data-name") || '';
/* all the other JavaScript/jQuery, click handlers and so forth... */
});

data-nameこの場合、変数はimgの属性と等しくなりdata-name attributeます。存在しない場合は、空の文字列に設定されます。

于 2012-04-09T19:07:26.723 に答える
0

必要なものには2つのオプションがあります。

  1. var bgグローバルスコープで定義し、.clickハンドラー内で更新します
  2. 'の$(".bg .thumb_wrapper.active img").attr("data-name");値を知りたいときはいつでも電話してください.activedata-name

コード:

var bg;
$(function () {
  $(".bg .thumb_wrapper").click(function() {
    $(".bg .thumb_wrapper").removeClass("active");
    $(this).addClass("active");
    bg = $(this).attr("data-name");
  });
});
于 2012-04-09T19:07:54.830 に答える
0

まず、$(el).data( "name")を使用して、.attrではなくデータ属性値を取得します。起動時にこれを行うと、値が存在する場合に値が取得されます。

Javascriptは機能的にスコープが設定されています。つまり、クリックハンドラーの関数で定義すると、その関数の外部からアクセスすることはできません。代わりに、変数を定義し、次のようにDOMReadyなどのより高いスコープで割り当てます。

$(function() {
    var bg = $(".bg .thumb_wrapper.active img").data("name");
});

bgは、ページが読み込まれたときに値を持ちます。クリックハンドラーなどの内部関数からアクセスできます。

于 2012-04-09T19:08:19.807 に答える
0

あなたの質問を正しく理解している場合は、ページの読み込み時に変数bgを作成して設定し、サムネイルがクリックされるたびに更新しますか?

もしそうなら、これはうまくいくはずです:

$(document).ready(function() {
    var bg = $(".bg .thumb_wrapper.active img").attr("data-name");
    $(".bg .thumb_wrapper").click(function() {
        $(".bg .thumb_wrapper").removeClass("active");
        $(this).addClass("active");
        bg = $(this).attr("data-name");
    });
});
于 2012-04-09T19:10:59.223 に答える