1

我有这个 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。

更新：使用的类，现在所有的 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

4 回答 4

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();
});
于 2012-07-03T23:34:37.357 回答
0

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

例如，我正在编造一个新的属性并绑定到它。

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

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

我想你明白了。

Ps：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');
    });

});​

我必须更新切换事件并在每次单击时检查其状态，因为关闭按钮正在杀死切换顺序（我的意思是，单击此处，打开一个 div 并在 div 内使用关闭按钮关闭，然后尝试从主要切换器。你会明白我的意思。）

示例 CSS：

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

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

你可以从这里检查。您可以通过这种方式将任何链接与您想要的任何内容相关联。​</p>

于 2012-07-03T23:33:24.503 回答
0

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

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

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

编辑：如果有（例如在 CSS 中），还可以通过 id 检查对“slickbox”的任何其他引用。

然后点击函数必须引用的不是 id 或类，而是被点击的对象：

$('.slick-show').click(function() {
        self.show('slow');
        return false;
});
于 2012-07-03T23:34:49.920 回答
0

我不确定您要达到什么目标，但这似乎是：

请参阅此工作小提琴示例！

假设以下 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);
  });

});
于 2012-07-04T00:00:16.910 回答