javascript - JQuery：从多个锚绑定中获取特定值？

Question

var myCode = {};

(function( global ) {
     global.print = function(value){
                   alert("Values: " + value);
                }
            })(myCode);


$(document).ready(function(e) {
    $('[id^=el]').bind("click", function(e) {
        myCode.print("Value");
    });

});

我有这个锚元素列表：

<li>
    <a id="el1"><h3>header 1</h3><p>paragraph 1</p></a>
</li>
<li>
    <a id="el2"><h3>header 2</h3><p>paragraph 2</p></a>
</li>
<li>
    <a id="el3"><h3>header 3</h3><p>paragraph 3</p></a>
</li>
<li>
    <a id="el4"><h3>header 4</h3><p>paragraph 4</p></a>
</li>

如何在不编写绑定的情况下绑定多个元素如果el4单击锚点我想打印Values: header 4, paragraph 4 那么我怎样才能进入Jquery单击的相应锚点的标题或段落？

Answer 1

看起来这样就可以了，您需要在您单击的每个锚点内获取 h3 和段落标签的文本值。

$('[id^="el"]').bind("click", function(e) {
    myCode.print($(this).find('h3').text() + ', ' + $(this).find('p').text());
});

Answer 2

试试这个

HTML

<li>
    <a id="el1"><h3>header 1</h3><p>paragraph 1</p></a>
</li>
<li>
    <a id="el2"><h3>header 2</h3><p>paragraph 2</p></a>
</li>
<li>
    <a id="el3"><h3>header 3</h3><p>paragraph 3</p></a>
</li>
<li>
    <a id="el4"><h3>header 4</h3><p>paragraph 4</p></a>
</li>

JS代码

var myCode = {};

(function( global ) {
     global.print = function(value){
                   alert("Values: " + value);
                }
            })(myCode);


$(document).ready(function(e) {
    $('[id^=el]').bind("click", function(e) {
        myCode.print($(this).find('h3').text()+ '  '+ $(this).find('p').text());
    });

});