点击链接显示数据在div和链接消失不工作 [英] Click on Link to show data on div and Link Disappear is not working

问题描述

我需要

• 我需要用户点击链接数据。



• 我已尝试过代码
   < a href =javascript：void（0）; class =viewdetail more
   style =color：＃8989D3！important;>查看详情
  < div class =speakers dis-non> 
  < / div> 
  < / a> 
    

  jquery代码

    $（'。viewdetail'）。click（function（）{
   $（this）.find（'。speakers'）。show（）; 
   $（this）.find （'.viewdetail'）。hide（）; 
  }）; 
    

  问题

  
  
  
  
  

  • 当我点击查看详情时，链接数据显示在div上。

  
  

  • 链接不会消失。
    

  • 如果我将锚定在div之前，则数据不会显示在说话人类div上。

  
  

  • > http://jsfiddle.net/fw3sgc21/

    解决方案

    由于div位于锚点内，div如果你隐藏锚点也将被隐藏。你需要把div放在锚点旁边，使它工作。使用 next（）方法选择div。

    
    
    

    HTML

    
    
    

     < a href =javascript：void id =viewdetailstyle =color：green>查看详情< / a> 
    < div class =speakers dis-nonstyle =display：none> 
    要显示的测试数据
    < / div> 
      

    JS

      $（'＃viewdetail'）。on（'click'，function（）{
     //在锚点旁边显示具有扬声器类的div 
     $ this）.next（'div.speakers'）。show（）; 
     
     //隐藏锚点
     $（this）.hide（）; 
    } 
      

    JSFiddle： http://jsfiddle.net/fw3sgc21/2/

    
    
    

    EDIT

    
    
    

    如果您要将音箱包装在另一个div中，如下所示

     < a href =javascript：void（0）; id =viewdetailstyle =color：green>查看详情< / a> 
    < div class =12u> 
    < div class =speakers dis-non> 
    要显示的测试数据
    < / div> 
    < / div> 
      

    使用以下CSS

      .dis-non 
     {
     display：none; 
    } 
      

    这里是JS应该显示 code> div并隐藏点击的锚

      $（'＃viewdetail'）。 （）{
     $（this）.next（）。children（'div.speakers'）。show（）; 
     $（this）.hide（）; 
    } 
      

    JSFiddle： http://jsfiddle.net/fw3sgc21/6/

    
    
    

    编辑2

    
    
    

    如果要将锚定在两个div之下，如下所示

     < div class =a> 
    < div class =b> 
    < a href =javascript：void（0）; id =viewdetailstyle =color：green>查看详情< / a> 
    < / div> 
    < / div> 
    < div class =12u> 
    < div class =speakers dis-non> 
    要显示的测试数据
    < / div> 
    < / div> 
      

    使用。parent（）方法两次选择< div class =a> ，然后使用 .next （）.children（'div.speakers'）。show（）以显示音箱 div

      $（'＃viewdetail'）。on（'click'，function（）{
     $（this）.parent（）。parent （）.children（'div.speakers'）。show（）; 
     $（this）.hide（）; 
    }）; 
      

    JSFiddle： http://jsfiddle.net/fw3sgc21/8/

    
    

    What I need

    • I need when user click on link data is shown.
    • link disappear after click.

    I have tried code

    <a href="javascript:void(0);" class="viewdetail more" 
        style="color:#8989D3!important;">view details
        <div class="speakers dis-non">
        </div>
    </a>
    

    jquery code

    $('.viewdetail').click(function() {
        $(this).find('.speakers').show();
        $(this).find('.viewdetail').hide();
    });
    

    problem

    • when I click on view detail link data is shown on div.

    • link doesn't disappear.

    • if I put anchor before div then data is not shown on speaker class div.

    • any suggestion are most welcome.

    jsfiddle: http://jsfiddle.net/fw3sgc21/

    解决方案

    Since the div is inside the anchor, the div will also be hidden if you hide the anchor. You need to put the div next to the anchor to make it work. Use next() method to select the div.

    HTML

    <a href="javascript:void(0);" id="viewdetail" style="color:green">view detail</a>
    <div class="speakers dis-non" style="display: none">
        test data to be shown
    </div>
    

    JS

    $('#viewdetail').on('click', function(){
        // show div with speakers class next to the anchor
        $(this).next('div.speakers').show(); 
    
        // hide the anchor
        $(this).hide();
    });
    

    JSFiddle: http://jsfiddle.net/fw3sgc21/2/

    EDIT

    If you want to wrap the speakers div inside another div as below

    <a href="javascript:void(0);" id="viewdetail" style="color:green">view detail</a>
    <div class="12u">
        <div class="speakers dis-non">
            test data to be shown
        </div>
    </div>
    

    with the following CSS

    .dis-non
    {
        display: none;
    }
    

    Here's the JS that should show the speakers div and hide the clicked anchor

    $('#viewdetail').on('click', function(){
        $(this).next().children('div.speakers').show();
        $(this).hide();
    });
    

    JSFiddle: http://jsfiddle.net/fw3sgc21/6/

    EDIT 2

    If you want to put the anchor inside two divs as below

    <div class="a">
        <div class="b">
            <a href="javascript:void(0);" id="viewdetail" style="color:green">view detail</a>
        </div>
    </div>
    <div class="12u">
        <div class="speakers dis-non">
            test data to be shown
        </div>
    </div>
    

    Use .parent() method twice to select <div class="a">, then use .next().children('div.speakers').show() to show the speakers div

    $('#viewdetail').on('click', function(){
        $(this).parent().parent().next().children('div.speakers').show();
        $(this).hide();
    });
    

    JSFiddle: http://jsfiddle.net/fw3sgc21/8/

    这篇关于点击链接显示数据在div和链接消失不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！