Question

我在一天前问了一个大问题，但没有得到足够好的答案，所以我将问题分成几部分。这是一部分：

看一下这段代码：

<?php
    foreach($tickets as $key=>$value)
           {
?>
               <div id="topic_<?php echo $key;?>"  data-id="<?php echo $key;?>" onclick="showDetails()">
                   ------------------------------
               </div>
               <div id="details_<?php echo $key;?>"  data-id="<?php echo $key;?>">
                   ------------------------------
               </div>
<?php
           }
?>

在这里，我们有一些<div> s（“topic _...”和“details _...”），每个都有唯一的id（data-id）。由于<div>循环，我们不知道这些foreach()中有多少会在那里。所有“详细信息”<div>都将在第一时间隐藏。现在，我想要的是，当我点击“主题”<div>时，会显示相应的“详细信息”<div>。我想我应该使用一个函数并在onclick事件中调用该函数，这就是我在“主题”onclick="showDetails()"中使用<div>的原因。如果我错了或者您有更好的想法，请与我分享。这是Javascript代码：

<script>
    $(document).ready(function(){
           $("#details_").hide();
    });
    function showDetails()
    {
        var id=$(this).attr('data-id');
        $("#details_"+id).show();
    }
</script>

我知道我无法在此处检测到所有“详细信息_ {...”<div>，并且可能在showDetails()函数中也存在一些问题。请帮帮我。

谢谢你们。

Answer 1

您可以使用相对选择器来避免所有这些ID废话。

showDetails(this)＆lt; ---发送参考当前元素

function showDetails(element) {
      $(element).next('div').show().
}

Answer 2

您需要使用this将事件源传递给函数。

HTML 的

<div id="topic_<?php echo $key;?>" 
        data-id="<?php echo $key;?>" onclick="showDetails(this)">

的Javascript

function showDetails(obj)
{
    var id=$(obj).attr('data-id');
    $("#details_"+id).show();
}

如果使用jQuery绑定事件，则可以在处理程序

中使用this

$('[id^=topic_]').click(function(){
    var id=$(this).attr('data-id');
    $("#details_"+id).show();
});

Answer 3

$('div[id^=details_]')会以字符串details_

为您提供id开头的所有div

Answer 4

首先，你要隐藏所有的div。要么添加一个像“hidden”这样的css类，要么将显示设置为none，要么使用类似这样的jquery

$('div[id^="details_"]').hide();

然后，showDetails函数需要知道需要显示哪个项目。我建议您使用jquery而不是每个项目都有onclick。

（这不是必需的，但可以替代你所拥有的）

$('div[id^="details_"]').click(function() {
    $("#details_"+ $(this).attr('data-id')).show();
    // or as Diodeus suggested
    // $(this).next('div').show().
});

总而言之，您可以将所有这些放在文档就绪方法

中

$(document).ready(function() {
    $('div[id^="details_"]').hide();
    $('div[id^="details_"]').click(function() {
        $("#details_"+ $(this).attr('data-id')).show();
    });
})

Answer 5

听起来你想要做的就是手风琴。每个Topic div都是手风琴标题，每个Details div都是手风琴主体。单击主题div时，将打开相应的Details div。您可以轻松找到可提供此类功能的手风琴jQuery插件。

但如果你不想要一个插件，你可以这样做：

1）向主题divs添加一个类，class =“topic”

2）在详细信息divs中添加一个类，class =“details”

$(document).ready(function() {
    var details = $('div.details');
    var topics = $('div.topics');
    details .hide();        //hide all the details divs
    topics .click(function() {
        details.hide();     //hide any open details    
        $(this).next('div.details').show();   //or you could use slideDown()/fadeIn()
    };
});

此代码假定每个主题div在其后面都有一个详细信息div。如果您不想在每次单击主题div时隐藏详细信息div，只需删除details.hide()行。

Answer 6

除了所有这些东西之外，你真的真的不需要在你的div中进行onclick。请不要这样做。

请考虑这样的事情：

<?php
foreach($tickets as $key=>$value)
       {
?>
           <div id="topic_<?php echo $key;?>"  data-id="<?php echo $key;?>">
               ------------------------------
           </div>
           <div id="details_<?php echo $key;?>"  data-id="<?php echo $key;?>">
               ------------------------------
           </div>
<?php
       }
?>

请注意，我摆脱了onclick ...现在，在你的js：

// set up your doc-ready code...
$(function(){
    var showDetails = function(evt)
    {
        var id= $(this).data('id');
        $("#details_"+id).show();
    };
    // now bind all divs that start with topic_ with a click event, with showDetails as the handler
    $('div[id^=topic_]').on('click',showDetails);
});

现在，伟大的，笨拙的海鲂，但我们不能比这更好吗？我想我们可以！如果您有权选择标记结构，请选择一个将嵌套作为其逻辑语义标记的一部分的结构，以便您的标记具有意义......

首先，让我们选择逻辑标记：

<dl class="topicslist">
<?php
foreach($tickets as $key=>$value)
       {
?>
           <dt data-id="<?php echo $key;?>">
               ------------------------------
           </dt>
           <dd data-id="<?php echo $key;?>">
               ------------------------------
           </dd>
<?php
       }
?>
</dl>

CSS：

.topiclist dd {
    display:none;
    margin:0 0 1em;
    padding:0;
}

.topiclist dd.show {
    display:block;
}

JS！

// set up your doc-ready code...
$(function(){
    var showDetails = function()
    {
        // find the next sibling dd to this object and show it!
        $(this).next('dd').show();
    };
    // now bind all divs that start with topic_ with a click event, with showDetails as the handler
    $('dl dt').on('click',showDetails);
});

制作一个也可以切换显示/隐藏的功能并不是太多步骤！

// set up your doc-ready code...
$(function(){
    var toggleDetails = function(){
        var mySib = $(this).next('dd');
        ($(mySib).hasClass('show')) ? $(mySib).removeClass('show') : $(mySib).addClass('show');
    };

    $('.topiclist dt').on('click',toggleDetails);
});

考虑到这一点，实际上，你根本不需要在你的标记中拥有data-id ...只要你总是安排你的列表以便dt是第一个并且直接跟着dd ，这应该有用。

http://jsfiddle.net/mori57/nqyRX/

使用jQuery </div>选择<div>

6 个答案: