.each在一个

Question

我有一些代码，当点击一个按钮打开与该按钮有关的容器时，但由于某些原因，无论我添加多少调整（jquery和html），它似乎总是打开所有不相关的容器给孩子们

所以这是我的编码

function Toggle(){
		$('.openable').each(function(){
    		if($(this).hasClass('open')){
            	$(this).children().addClass('hidden');
                $(this).removeClass('open');
            }else{
            	$(this).children().removeClass('hidden');
                $(this).addClass('open');
            }
    	});
    }

<div class="spanHold">
            	<?
                	$sql = "SELECT * FROM movieHosting WHERE name='$name' ORDER BY id ASC";
                    $query = mysql_query($sql);
                    
                    while($row = mysql_fetch_object($query)){
                    	$id = $row->id;
                    	$name = $row->name;
                        $season = $row->season;
                        $episode = $row->episode;
                      	$type = $row->type;
                        
                        if($type == "movie"){
                        	echo "
                      			<div onclick='Toggle()' class='container'>
                					<button type='button' class='btn btn-block btn-primary'>Movie: $season</button>
                					<div class='openable'>
                						<a class='videoLink hidden' href='play.php?id=$id' target='_BLANK'>Play</a>
                					</div>
                				</div>
                			";
                        }else{
                        	echo "
                      			<div onclick='Toggle()' class='container'>
                					<button type='button' class='btn btn-block btn-primary'>Season: $season Episode: $episode</button>
                					<div class='openable'>
                						<a class='videoLink hidden' href='play.php?id=$id' target='_BLANK'>Play</a>
                					</div>
                				</div>
                			";
                        }
                    }
                ?>
            </div>

在小工具的工作示例中演示问题（未解决只是为了显示问题）

这里有点小提琴

function Toggle(){
    		$('.openable').each(function(){
        		if($(this).hasClass('open')){
                	$(this).children().addClass('hidden');
                    $(this).removeClass('open');
                }else{
                	$(this).children().removeClass('hidden');
                    $(this).addClass('open');
                }
        	});
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>

    <div class="spanHold">
                	<div onclick='Toggle()' class='container'>
                    					<button type='button' class='btn btn-block btn-primary'>Movie: 1</button>
                    					<div class='openable'>
                    						<a class='videoLink hidden' href='play.php' target='_BLANK'>Play</a>
                    					</div>
                    				</div>
      
                </div>

<div class="spanHold">
                	<div onclick='Toggle()' class='container'>
                    					<button type='button' class='btn btn-block btn-primary'>Movie: 2</button>
                    					<div class='openable'>
                    						<a class='videoLink hidden' href='play.php' target='_BLANK'>Play</a>
                    					</div>
                    				</div>
      
                </div>

如果您运行上面的示例并单击影片1，您会注意到影片1和影片2容器都已打开，最终目标是仅打开与单击的btn相关的容器

奖金：

如果您能为下面的例子提供一个有效的例子，我会打开赏金并将其奖励给最佳答案

- 如果用户点击另一个btn，则先点击btn，之前打开的容器已关闭

Answer 1

1. 您应该只听取Toggle元素上的点击事件，而不是设置.container函数内联（在html中）。
2. 您应该只找到您刚刚点击的特定容器中的.openable元素，而不是找到.openable元素的所有。
3. 如果您想确保每次点击都会关闭其他“已打开”标签，则应检查已打开的标签并隐藏它们

对于＃3，您可以使用此代码：

$('.container').not(this).find('.open').each(function() {
    $(this).children().addClass('hidden');
    $(this).removeClass('open');
});

这是一个有效的例子：

$(function() {
  $('.container').on('click', function() {
    
    // Hide other opened tabs, if any exists
    $('.container').not(this).find('.open').each(function() {
      $(this).children().addClass('hidden');
      $(this).removeClass('open');
    });

    // Find the openable content inside the current container (the one we clicked) and open/close it
    $(this).find('.openable').each(function(){
      if($(this).hasClass('open')){
        $(this).children().addClass('hidden');
        $(this).removeClass('open');
      }else{
        $(this).children().removeClass('hidden');
        $(this).addClass('open');
      }
    });
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>

    <div class="spanHold">
                	<div class='container'>
                    					<button type='button' class='btn btn-block btn-primary'>Movie: 1</button>
                    					<div class='openable'>
                    						<a class='videoLink hidden' href='play.php' target='_BLANK'>Play</a>
                    					</div>
                    				</div>
      
                </div>

<div class="spanHold">
                	<div class='container'>
                    					<button type='button' class='btn btn-block btn-primary'>Movie: 2</button>
                    					<div class='openable'>
                    						<a class='videoLink hidden' href='play.php' target='_BLANK'>Play</a>
                    					</div>
                    				</div>
      
                </div>