2

jqueryを使用して、その値を取得したいdivにonclickイベントなどを書き込まずに、divなどの要素から値を取得する方法について質問があります。

これが私のコードです：

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div id="test" title="test1">test</div>
    <div id="test2" title="test2">test2</div>
    <script>
        function getVal(attr,value){
            $("#show").text("this "+attr+" have value ="+value);
        }
        $(document).ready(function(){
            $("#test").click(function(){
                getVal("#test",$("#test").attr("title"));
            }); 
        });
    </script>
    <div id="show"></div>
</body>
</html>

通常、クリックしたdivから値を取得するには、divのようなonclickイベントを追加する <div id='test' onclick="getVal(test)" ></div> と、「テスト」が返されます。そして、私が上に書いたコードはほぼ私が望むものですが、私が抱えている問題は、多くのdivがある場合、jqueryクリック関数を使用するだけでクリックした各divから値を取得するにはどうすればよいですか?書きます

$("#test").click(function(){
                    getVal("#test",$("#test").attr("title"));
                }); 
$("#test2").click(function(){
                    getVal("#test2",$("#test2").attr("title"));
                });//and so on

ここで、divに配置したonclickイベントを使用して、目的を達成するために使用するコード:

    <script type="text/javascript">
                function overlay(rel){
                    var value = rel;
                    $(document).ready(function(){
                        $(".img"+value).click(function(){
                            $(".overlay-bg"+value).fadeIn();
                        });
                        $(".close"+value).click(function(){
                            $(".overlay-bg"+value).fadeOut();
                        })
                    });
                }
            </script>
        <div id="gallery">

                                <img src="http://localhost/wedding/source/gallery/thumb/thumb-a.jpg" class="img1" onclick="overlay(1)" title="photo1" alt="photo1"/> 

                            </div>

                            <div id="overlay-bg" class="overlay-bg1">

                                <div id="overlay"><img src="http://localhost/wedding/source/gallery/a.jpg"/>

                                    <span>photo1</span>

                                    <span style="font-size:0.8em;"><p>photo a</p></span>

                                    <div id="close" class="close1"></div>

                                </div>

                            </div>

<div id="gallery">

                                <img src="http://localhost/wedding/source/gallery/thumb/thumb-b.jpg" class="img2" onclick="overlay(2)" title="photo2" alt="photo2"/> 

                            </div>

                            <div id="overlay-bg" class="overlay-bg2">

                                <div id="overlay"><img src="http://localhost/wedding/source/gallery/b.jpg"/>

                                    <span>photo2</span>

                                    <span style="font-size:0.8em;"><p>photo b</p></span>

                                    <div id="close" class="close2"></div>

                                </div>

                            </div>

問題を解決する方法を本当に知りたいです。

4

6 に答える 6

2

クリックイベントハンドラーを同じクラスにアタッチする要素を指定します。次に、クラスセレクター[ドキュメント]を使用して、それらすべてを選択します。

$('.sharedClass').click(function() {
    getVal(this.id, $(this).attr("title"));
});

jQueryは、選択した各要素にイベントハンドラーをバインドします。

要素を選択する方法はたくさんあります[ドキュメント]、IDまたはクラスによる選択はそのうちの2つにすぎません。また、 jQueryのチュートリアルは、jQueryがどのように機能するかをよりよく理解するのに役立つ場合があります。

于 2012-10-13T07:59:58.140 に答える
0

thisハンドラー関数内でキーワードを使用でき、クリックされた要素を指します

于 2012-10-13T08:01:07.327 に答える
0

これを行う正しい方法は次のとおりです。

ターゲットにクラス名を付けます。div例：

<div id="test" class="clickable" title="test">test</div>
<div id="test2" class="clickable" title="test">test</div>
...
...

次に、選択したjQueryイベントを作成しますclass

$('.clickable').click(function(){ ... });
于 2012-10-13T08:01:59.547 に答える
0 
<div id="test">harsh</div>


<script>
alert(document.getElementById('test').innerHTML);
</script>
于 2012-10-13T08:03:30.807 に答える
0

すべての div をクリックしてこの関数を呼び出したい場合は、次を使用します。

 $("div").click(function(){
                getVal($(this),$(this).attr("title"));
            });

すべてではなく一連の div に対して関数を呼び出したい場合は、それらの div に @Felix Kling が提案するクラス名を付けます。

より良いアイデアを得るには、 jQuery セレクターを確認してください。

于 2012-10-13T08:05:02.553 に答える
0

何を達成しようとしているのかわかりません。

複数の値がある場合、それらをどのように保存しますか?

入力したい配列がある場合は、JQuery セレクターで each() 関数を使用して、選択したすべての要素をトラバースできます。

そのようです：

    var values = new Array();

    $(document).ready(function(){
        $('#test1, #test2').each(function(){
            values.push($(this).html());
        });
    });

配列を反復処理したくない場合は、値を連想的に格納して、取得を少し簡単にすることもできます。たとえば、'title' 属性の値を配列のキーとして使用できます。

values.push() 行を次のコード行に置き換えます。

values[$(this).attr('title')] = $(this).html();
于 2012-10-13T08:05:40.403 に答える