修改jquery隐藏/显示框以便使用相同div的多个实例

时间:2012-07-03 23:30:04

标签: php jquery

我有这个jquery代码:

<script type="text/javascript">

    jQuery(document).ready(function($){  
        // hides the slickbox as soon as the DOM is ready
        $('#slickbox').hide();
        // shows the slickbox on clicking the noted link  
        $('#slick-show').click(function() {
            $('#slickbox').show('slow');
            return false;
        });
        // hides the slickbox on clicking the noted link  
        $('#slick-hide').click(function() {
            $('#slickbox').hide('fast');
            return false;
        });
        // toggles the slickbox on clicking the noted link  
        $('#slick-toggle').click(function() {
            $('#slickbox').toggle(400);
            return false;
        });
    });
    </script>

问题是:如何让代码适用于同一div的多个实例?

就像这样,它适用于第一个for循环的div。

UPDATE:使用过的类,现在所有的div都被立即切换。我需要的是例如,如果我点击循环生成的第三个链接,只显示第三个slickbox。希望你理解。

<?       for ($i = 1; $i <= get_option('category_nr'); $i++): 

         <table class="form-table">
            <tr valign="top">
                <td colspan="2"><a href="#" class="slick-toggle<? echo $i; ?>">Toggle the box</a></td>
            </tr>
        </table>

        <div class="slickbox<? echo $i; ?>">
                Content
        </div>

<?      endfor; ?>

谢谢!

4 个答案:

答案 0 :(得分:1)

编辑:

现在每个链接都会切换一个div。 链接的id必须与div的类相同。

代码未经测试:

HTML:

<a href="#" class="toggle_link" id="toggle_1">link 1</a>
<div class="toggle_1">Box 1</div>

<a href="#" class="toggle_link" id="toggle_2">link 2</a>
<div class="toggle_2">Box 2</div>

jQuery的:

$('a.toggle_link').click(function(e) {
  e.preventDefault();
  $('.'+$(this).attr('id')).toggle();
});

答案 1 :(得分:0)

将点击绑定到类或其他属性而不是ID。

例如,我正在组建一个新的社区并对其进行约束。

$('div[rel="slickbox"]').hide();

<div rel="slickbox" id="slickbox">

我猜你有这个主意。

P.s:ID应该是唯一的,不要在循环上使用相同的ID,使它们唯一。

编辑:使用解决方案更新回复:

示例HTML:

    <a class="click" id="id1" rel="1">Click me</a>
    <a class="click" id="id2" rel="2">Or me</a>
    <a class="click" id="id3" rel="3">Or to me</a>

    <br /><br />
    <div id="hidden1" class="hidden">First Hidden Div <button class="closeme">Close Me</button></div>
    <div id="hidden2" class="hidden">Second Hidden Div <button class="closeme">Close Me</button></div>
    <div id="hidden3" class="hidden">Third Hidden Div <button class="closeme">Close Me</button></div>​

示例jQuery:

$(function(){

    $('.click').click(function(){
        if($('#hidden'+$(this).attr('rel')).is(':hidden')) {
            $('#hidden'+$(this).attr('rel')).show('fast');
        } else {
            $('#hidden'+$(this).attr('rel')).hide('fast');
        }
    });

    $('.closeme').click(function(){
    $(this).parent('div').hide('fast');
    });

});​

我必须更新切换事件并在每次点击时检查其状态,因为关闭按钮是杀死切换顺序(我的意思是,单击here,打开div并关闭div内的关闭按钮,并且试着从主要的交换者那里重新打开。你会明白我的意思。)

示例CSS:

.click {
 display:block;
 cursor:pointer;    
}

.hidden {
 display:none; /*hide for default*/
background:red;
 color: white;   
}

您可以从here查看。您可以将任何链接与您想要的任何链接相关联。

答案 2 :(得分:0)

您不得生成多个相同的ID。创建一个空类“slickbox”并使用

 <div id="slickbox_<?php print "$i"; ?>" class="slickbox">

然后jQuery选择“.slickbox”而不是“#slickbox”。

编辑:如果存在(例如在CSS中),还要通过id检查对“slickbox”的任何其他引用。

然后,click函数不能引用id或类,而是引用所单击的对象:

$('.slick-show').click(function() {
        self.show('slow');
        return false;
});

答案 3 :(得分:0)

我不确定你想要实现什么,但这似乎就是这样:

请参阅此Working Fiddle Example

假设以下HTML:

<div id="actions">
    <button id="slick-show">Show all</button>
    <button id="slick-hide">Hide all</button>
</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>

<强>的jQuery

jQuery(document).ready(function($){

  // define the target element
  var $target = $('.slickbox');

  // hides all by default
  $target.hide();

  // shows all
  $('#slick-show').bind("click", function(event) {
    event.preventDefault();
    $target.show('slow');
  });

  // hides all
  $('#slick-hide').bind("click", function(event) {
    event.preventDefault();
    $target.hide('fast');
  });

  // toggles the clicked one
  $target.bind("click", function(event) {
    event.preventDefault();
    $(this).toggle(400);
  });

});