Question

我有这个jsfiddle脚本

会发生的是2个警报具有相同的编号。我应该使用123，另一个使用555

问题是我必须拥有相同的课程

见这里：

<ul class="tabs">
<li><a href="#tab1">Home</a> | </li>
<li> | <a href="#tab2">Top 10</a> | </li>
<li><a id="mine" href="#tab3"></a></li>
</ul>

<div id="tab1" class="tab_content">
<ul>
 <li>
<div class="cont_picture"><a id="mine_click" href="#" >a test</a> | </div>
<div id="number">123</div>
</li><li>
<div class="cont_picture"> | <a id="mine_click" href="#" >a test1</a></div>
<div id="number">555</div>
</li>
</ul>
</div>
<div id="tab2" class="tab_content">234</div>
<div id="tab3" class="tab_content">2222</div>

和

    var strtalentnum;
$('#mine_click').live('click', function() {
        strtalentnum = $('#number').text();
        $('#mine').trigger('click');
});

$("#mine").click(function(){
    if(strtalentnum){
         alert (strtalentnum);
    }
});



//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
    $('ul.tabs li#none').removeClass('visible');
    $('ul.tabs li#none').addClass('none');
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

有关如何解决此问题的任何想法？我试图使用$(this)，但看起来不再出现警报

感谢

Answer 1

在具有相同ID值的HTML文档中，不能有多个项目。您根本无法做到这一点并尝试使用这些ID会产生不一致的结果。在大多数使用ID的情况下，您希望切换到使用类：

使用您的HTML（我已经将类冲突的ID更改为类），您可以点击任一链接，使用此jQuery警告相邻的数字值：

$('.mine_click').live('click', function() {
    alert($(this).closest("li").find(".number").text());
});

你可以在这个jsFiddle中看到它的工作原理：http://jsfiddle.net/jfriend00/cj4RE/

以下是我修复的HTML的相关部分（使用类而不是ID）：

<div id="tab1" class="tab_content">
    <ul>
        <li>
            <div class="cont_picture">
                <a class="mine_click" href="#" >a test</a> | 
            </div>
            <div class="number">123</div>
        </li>
        <li>
            <div class="cont_picture"> | 
                <a class="mine_click" href="#" >a test1</a>
            </div>
            <div class="number">555</div>
        </li>
    </ul>
</div>

上面的jQuery代码从点击的链接中获取父li标签，然后在该公共父级中找到具有“number”类的对象并抓取文本。这将是相邻的号码。

解析代码：

$(this)获取点击链接的jQuery对象。

.closest("li")找到第一个是li标签的父级

.find(".number")在父级中搜索一个或多个具有class =“number”

的对象

.text()从该对象中提取文本

Answer 2

您应该在使用类时使用ID。

Answer 3

$(function() {

    var strtalentnum;

    $('.mine_click').click(function(e) {
        e.preventDefault();
        strtalentnum = +$(this).parent('div').next('.number').html();
    });

    $('.mine').click(function(e) {
        e.preventDefault();
        if (strtalentnum) {
            alert(strtalentnum);
        } else {
            alert('No Value Selected');
        }
    });

});

但是在旁注中，您可能希望将id="number"和id="mine_click"更改为class="number" ...等。每个ID只有一个元素，你知道吗？

jquery，如何从同一个类的链接中获取不同的值？

3 个答案: