HTML
//FIRST TOGGLE
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>
//SECOND TOGGLE
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>
JS
$(document).ready(function(){
$(document).on('click','.slidx',function(){
$(".mfields").slideToggle( 'slow', function() {});
});
});
继承JS字段:http://jsfiddle.net/d2tcmqpo/2/
所以我有两个幻灯片切换按钮,请检查js小提琴,这样您就可以看到,我想发生的事情是:如果我单击第一个切换按钮,它将打开,但是问题是当我单击第一个切换按钮时,第二个切换按钮也打开。
我知道我可以通过在每个切换中使用不同的类名来解决此问题。但是我不想那样,为什么?因为如果我要进行100次切换,则必须像这样编写100倍的当前JQUERY代码。
$(document).on('click','.slidx_1',function(){
$(".mfields_1").slideToggle( 'slow', function() {});
});
$(document).on('click','.slidx_2',function(){
$(".mfields_2").slideToggle( 'slow', function() {});
});
$(document).on('click','.slidx_3',function(){
$(".mfields_3").slideToggle( 'slow', function() {});
});
以此类推。
我在想,也许我应该使用jQuery $(this)
,但它也不起作用。
有什么办法解决这个问题?还是我别无选择,只能在每个切换中使用不同的类?
答案 0 :(得分:2)
您也可以尝试:
validates :user_id, presence: true, uniqueness: { scope: :contact_form_id }
答案 1 :(得分:1)
您需要执行上下文查找,以找到与其他元素相关的幻灯片。请参见下面的摘要中的评论。
$(document).ready(function(){
$(document).on('click','.slidx',function(){
//this selects all the mfields on the page, not just the one you want to slide.
$(".mfields").slideToggle( 'slow', function() {});
});
});
$(document).ready(function(){
$(document).on('click','.slidx',function(){
//this version will find the parent dropdown-cus of the slidx and mfields,
//and then find the mfields inside it, and only that one
$(this).closest('.dropdown-cus').find(".mfields").slideToggle( 'slow', function() {});
});
});
答案 2 :(得分:1)
首先,您去最接近的父类并找到您的mfields
$(document).ready(function(){
$(document).on('click','.slidx',function(){
$(this).closest('.dropdown-cus').find(".mfields").slideToggle( 'slow', function() {});
});
});
.dropdown-cus{
width: 300px;
height: auto;
background-color: #e4e4e4;
cursor: pointer;
padding: 5px 20px;
position: relative;
}
.dropdown-cus i{
right: 0;
position: absolute;
margin-right: 10px;
margin-top: 5px;
}
.dropdown-cus input{
width: 100%;
margin-bottom: 25px;
}
.h-label hr{
margin-top: 5px;
}
.hidden{
display: none;
}
.dropdown-cus span {
width: 100%;
padding: 6px 0px;
transition: .5s;
display: inline-block;
}
.h-label label {
font-size: 12px;
font-style: italic;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>
<div class='dropdown-cus' type='button'>
<div class='slidx'>
<span>MENU<i class='fas fa-plus'></i></span>
</div>
<div class='mfields hidden h-label'>
<label >NAME:</label><input type='text' value='' name='' class='re_'>
<label >URL:</label><input type='text' value='LINK HERE' name='' class='' >
<input type='hidden' value='' class='input-text' name=''>
</div>
</div>