单击链接以在 div 上显示数据并且链接消失不起作用

Question

我需要什么

• 我需要在用户点击链接数据时显示。
• 点击后链接消失。

我试过代码

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

jquery 代码

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

问题

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

• 链接不会消失。

• 如果我在 div 之前放置锚点，那么扬声器类 div 上不会显示数据。

• 欢迎提出任何建议。

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

Answer 1

由于div在anchor里面，隐藏anchor也会隐藏div。您需要将 div 放在锚点旁边才能使其工作。使用next()方法选择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/

编辑

如果您想将speakers div 包装在另一个 div 中，如下所示

<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>

使用以下 CSS

.dis-non
{
    display: none;
}

这是应该显示 speakers div 并隐藏单击的锚点的 JS

$('#viewdetail').on('click', function(){
    $(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="viewdetail" style="color:green">view detail</a>
    </div>
</div>
<div class="12u">
    <div class="speakers dis-non">
        test data to be shown
    </div>
</div>

使用.parent() 方法两次选择<div class="a">，然后使用.next().children('div.speakers').show() 显示speakers div

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

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

Answer 2

尝试以下方法：

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

$(this) 指的是.viewdetail 所以你不需要find 再次

将div拉到超链接外

HTML：

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

<div class="speakers dis-non"></div>

Answer 3

试试这个

html

<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail

</a>
    <div class="speakers dis-non">
        test
    </div>

js

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


            });

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

Answer 4

首先，您的代码中的this 指的是被点击的链接本身。 所以这条线$(this).find('.viewdetail').hide(); 不起作用，因为链接内部没有.viewdetail。应该是

$('.viewdetail').on('click',function(e) {
        var self = $(this);
        self.find('.speakers').show();
        self.hide();
});

但是，如果您隐藏您的链接，.speakers 也将被隐藏，因为它在您的链接内。如果你想让它可见，你应该把它放在链接之外

例如：

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

还有 JS：

$('.viewdetail').on('click',function(e) {
        var self = $(this);
        e.preventDefault(); // prevent link from working the way it should
        self.next('.speakers').show();
        self.hide();
});