2017-01-31 13 views
2

いくつかのdivは異なるコンテンツを隠していますが、一意のIDを持つリンクを持っています。どのように私はそれらのすべてのボタンを同じ機能をトリガし、自分のコンテナのためだけに動作させることができますか?HTMLリンク(a)が異なるIDを持つことで、同じコンテナの同じ機能をトリガーするdiv

$(document).ready(function() { 
 

 
    $("#:input[id^='myBtn_']").click(function() { 
 
    showPopup(); 
 
    }); 
 

 
    $(".modal-content").click(function() { 
 

 
    $(this).hide(); 
 
    $("#mask").hide(); 
 

 
    }); 
 

 
}); 
 

 
function showPopup() { 
 
    // show the mask 
 
    $("#mask").fadeTo(500, 0.25); 
 

 
    // show the popup 
 
    $(".modal-content").show(); 
 
}
* { 
 
    margin: 0, padding 0 
 
} 
 
#mask { 
 
    position: absolute; 
 
    margin: 0 auto; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000; 
 
    display: none; 
 
    z-index: 10000; 
 
} 
 
.modal-content { 
 
    position: absolute; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 25%; 
 
    width: 450px; 
 
    height: auto; 
 
    margin: 10px auto; 
 
    border: 1px solid #333; 
 
    background-color: #ffff; 
 
    color: #000; 
 
    cursor: pointer; 
 
    padding: 10px; 
 
    position: relative; 
 
    z-index: 10001; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toptop"> 
 
    <h4>test1</h4> 
 
    <div class="someclass">Title</div> 
 

 
    <a href="javascript:;" id="myBtn test1">Read more...</a> 
 
    <div class="modal" id="myModal test1"> 
 
    <div id="mask">&nbsp;</div> 
 
    <div class="modal-content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 

 

 
    </div> 
 

 

 
    <div class="toptop"> 
 
    <h4>test2</h4> 
 
    <div class="someclass">Title</div> 
 

 
    <a href="javascript:;" id="myBtn test2">Read more...</a> 
 
    <div class="modal" id="myModal test2"> 
 
     <div id="mask">&nbsp;</div> 
 
     <div class="modal-content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
     </div> 
 

 

 
    </div>

+0

'$( "#:入力[ID^= 'myBtnです_']")' '#'はここで何をしているのですか?このような 使用複数のIDも許可されません。代わりにクラスを使用する – guradio

答えて

2

IDは常に一意である必要があります。その代わりにクラスを与えて、あなたのイベントとしてそれをターゲットにしてください。このようなもの。

<a href="javascript:;" class="button" id="myBtn">Read more...</a> 

$("a.button").click(function(e) { 
     showPopup($(this)); 
}); 

function showPopup(element) { 
    // show the mask 
    element.next('#mask').fadeTo(500, 0.25); 

} 
0

単一の要素に複数のIDを使用することはできません。 IDはユニークで、すべての要素に1つだけ使用する必要があります。これには複数のクラスを使用できます。

$(document).ready(function() { 
 

 
    $("a.myBtn").click(function() { 
 
     $(this).next(".modal").fadeIn(500); 
 
    }); 
 

 
    $(".modal").click(function() { 
 

 
     $(this).hide(); 
 

 
    }); 
 

 
});
* { margin: 0, padding 0} 
 

 
.modal{ 
 
    position: absolute; 
 
    margin:0 auto; 
 
    top: 0; 
 
    left: 0; 
 
    bottom:0; 
 
right:0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #333; 
 
    color:#fff; 
 
    display: none; 
 
    z-index: 10000; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toptop"> 
 
    <h4>test1</h4> 
 
    <div class="someclass">Title</div> 
 

 
    <a href="javascript:;" class="myBtn test1">Read more...</a> 
 
    <div class="modal" id="test1"> 
 
    <div class="mask">&nbsp;</div> 
 
    <div class="modal-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 

 

 
</div> 
 

 

 
<div class="toptop"> 
 
    <h4>test2</h4> 
 
    <div class="someclass">Title</div> 
 

 
    <a href="javascript:;" class="myBtn test2">Read more...</a> 
 
    <div class="modal" id="test2"> 
 
    <div class="mask">&nbsp;</div> 
 
    <div class="modal-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 

 

 
</div>

関連する問題