2

我有一些关于如何使用 jquery 从 div 等元素中获取一些值的问题，并且没有在我想要获取该值的 div 上写入 onclick 事件等。

这是我的代码：

<!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> ，它会返回“test”。我在上面写的代码几乎是我想要的，但我遇到的问题是，如果我有很多 div，我怎样才能从我点击的每个 div 中获取值，我只使用 jquery click 函数，我不需要写

$("#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

将要附加单击事件处理程序的元素提供给同一类。然后使用类选择器[docs]选择所有这些：

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

jQuery 会将事件处理程序绑定到每个选定的元素。

选择元素的方法有很多[docs]，按 ID 或类选择只是其中两种。您可能还会发现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（但不是全部）调用该函数，请按照@Felix Kling 的建议为这些 div 指定一个类名。

查看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 回答