2

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

看看这段代码：

<?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>s 会有多少。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>

我知道我在这里无法检测到所有“details_......” <div>，并且可能showDetails()函数中也存在一些问题。请帮我。

多谢你们。

4

6 回答 6

2

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

showDetails(this) <--- 发送对当前元素的引用

function showDetails(element) {
      $(element).next('div').show().
}
于 2013-05-16T15:45:13.910 回答
1

您需要将事件源传递给使用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();
});
于 2013-05-16T15:43:06.830 回答
0

听起来你想做的是手风琴。每个 Topic div 是手风琴标题，每个 Details div 是手风琴正文。当您单击一个主题 div 时，其相应的详细信息 div 将打开。你可以很容易地找到一个提供这种功能的手风琴的 jQuery 插件。

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

1）在主题div中添加一个类，class="topic"

2）在细节div中添加一个类，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()行。

于 2013-05-16T15:57:49.963 回答
0

除了所有这些之外，你真的真的真的不需要在你的 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/

于 2013-05-16T16:06:41.327 回答
0

$('div[id^=details_]')将为您提供 id 以字符串开头的所有 divdetails_

于 2013-05-16T15:43:10.400 回答
0

首先，你想隐藏所有的 div。添加一个像“隐藏”这样的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();
    });
})
于 2013-05-16T15:47:22.447 回答