Question

首先，我想要问一些如此具体的事情而道歉，但它整天都在惹恼我的大脑而且我没有想法。

我使用jquery根据数字后缀显示和隐藏元素，即：

<a href="javascript:showCont(1)" class="tab"><span></span></a>将定位 - ＆gt;

<div class="content" id="cont-1">This is content</div>并且它完美无缺。我想基于另一个元素的后缀来定位另一个元素，但我没有。这是代码：

HTML：

<script src="http://code.jquery.com/jquery.js"></script>
<a href="javascript:showCont(1)" class="tab" id="tab-1">1</a>
<a href="javascript:showCont(2)" class="tab" id="tab-2">2</a>
<a href="javascript:showCont(3)" class="tab" id="tab-3">3</a>

<div class="content" id="cont-1"><p>This is content</p></div>
<div class="content" id="cont-2"><p>This is content</p></div>

<div class="content" id="cont-3">
    <div class="child" id="child-11"><p>This is the first child</p></div>
    <div class="child" id="child-12"><p>This is the second child</p></div>
</div>

<div class="external" id="external-11"><p>I am the first external</p></div>
<div class="external" id="external-12"><p>I am the second external</p></div>

JAVASCRIPT：

var $ = jQuery;

$(document).ready(function(){
   $('.content .child:nth-child(1)').addClass('active');
});

function showCont(num){
  $('.content').fadeOut(300);
  if(  $('#cont-'+num).css('display')=='none' ){
    $('#cont-'+num).fadeIn();
  }else{
    $('#cont-'+num).fadeOut();
  }  
}

CSS：

.content{
    background:green;
    color:white;
    padding:5px;
 }

.external{
    background:blue;
    color:white;
    padding:5px;
}

.content, .external, .child{
  display:none;
}

.active{
  display:block;
}

CodePen ：http://codepen.io/anon/pen/uFpzE

我想要实现的目标是：

如果您点击#tab-3，.external与#cont-3的第一个孩子对应的var $ = jQuery; $(document).ready(function(){ $('.content .child:nth-child(1)').addClass('active'); var random = $('#cont'+num + '.child:first-child').attr('id').replace(/child-/, ''); }); function showCont(num){ $('.content').fadeOut(300); if( $('#cont-'+num).css('display')=='none'){ $('#cont-'+num).fadeIn(); $('#external'+random).fadeIn({'duration':600,'queue':false}); }else{ $('#cont-'+num).fadeOut(); } } div应显示。

我试过这个：

{{1}}

......它不起作用。我哪里错了？

Answer 1

我不能100％确定您使用document.ready部分中的代码尝试完成的任务，但showCont功能可以满足您的要求。

$(document).ready(function(){
 $('.content .child:nth-child(1)').addClass('active');
});

function showCont(num)
{
    $('.content').fadeOut(300);
    $('.external').fadeOut(300);

    if( $('#cont-'+num).css('display')=='none' )
    {
        $('#cont-'+num).fadeIn();

        // get the child element's id
        var targetID = $("#cont-"+num).children().first().attr('id');

        if(targetID)
        {
            // construct the id of the external element
            $('#external-'+targetID.substring(targetID.indexOf('-')+1))
                .fadeIn({'duration':600,'queue':false});
        }
    }
    else
    {
        $('#cont-'+num).fadeOut();
    }
}

DEMO

Answer 2

我认为你的错误功能random。 #cont和#external选择器也缺少一个尾随破折号：

$(document).ready(function(){
 $('.content .child:nth-child(1)').addClass('active');
});

function showCont(num){
  var random = $('#cont-'+num + '.child:first-child').attr('id').replace(/child-/, ''); 
  $('.content').fadeOut(300);
  if( $('#cont-'+num).css('display')=='none'){
    $('#cont-'+num).fadeIn();
    $('#external-'+random).fadeIn({'duration':600,'queue':false});
  }else{
    $('#cont-'+num).fadeOut();
  }  
}

这应该更接近你所追求的（尽管未经测试）。

一旦你有了它的工作，你可以通过在你的HTML元素上使用data-id="num"属性并在js中使用.data('id')访问id值，然后绑定选项卡按钮来简化它在你的DOM准备好fn。它会更接近这一点：

$(function() {
    $('.tab').click(function (e) {
        var num = $(this).data('id'),
            $child = $('.child[data-id="' + num + '"]')
        ;
        // ...
    })
})

Answer 3

变量random在你的JS文件中没有定义，并且有一些关于选择器元素的拼写错误（例如它应该是$（'#external - '+ random）而不是$（'#external'+ random））。根据您的代码，我想出了以下内容供您参考：

DEMO

var $ = jQuery;

$(document).ready(function(){
 $('.content .child:nth-child(1)').addClass('active');
});

function showCont(num){
  $('.content').fadeOut(300);
if( $('#cont-'+num).css('display')=='none' )
  {
    $('#cont-'+num).fadeIn();
    var random = $('#cont-'+num + ' div:first-child').attr('id').substring(6);
    $('#external-'+random).fadeIn({'duration':600,'queue':false});
  }
 else
  {
    $('#cont-'+num).fadeOut();
    var random = $('#cont-'+num + ' div:first-child').attr('id').substring(6);
    $('#external-'+random).fadeOut({'duration':600,'queue':false});
  }  
}

Answer 4

我认为这会改变你的function showCont(num)会：

 $('.content').fadeOut(300);
    if(  $('#cont-'+num).css('display')=='none' )
    {
    $('#cont-'+num).fadeIn();
    var value= $('#cont-'+num+' div' ).first().attr("id").slice(-2);
    $('#external-'+value).fadeIn();
  }
  else
    {
    $('#cont-'+num).fadeOut();
    $('.external').fadeOut();
  }

jQuery显示具有相同数字后缀的div作为元素的第一个子元素

4 个答案: