unterscheiden zwischen sehr ähnlichen Tasten Klicks

Question

Ich habe 3 Link-Tasten mit dem gleichen Text und Klasse buy-input-text buy-input-general. Sie alle lösen den gleichen modalen Dialog aus. Ich möchte den modalen Dialog anpassen, basierend auf welcher Schaltfläche geklickt wurde. Zum Beispiel h3 Element ändern. Was ist der bevorzugte Weg, dies zu tun?

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

 
$(".showModalView").click(function(){ 
 
\t $("#buy-wrapper").show(); 
 
console.log("showModalView"); 
 

 
}); 
 

 
$("#buy-wrapper").click(function(e){ 
 
\t if ($(e.target).closest("#buy-box").length === 0) 
 
\t \t $("#buy-wrapper").hide(); 
 
console.log("closeModalView"); 
 

 
}); 
 

 

 
});

.buy-input-general { 
 
    outline: none; 
 
} 
 

 
#buy-wrapper { 
 
    display:none; 
 
    position:absolute; 
 
    top:25vh; 
 
    right:0; 
 
    bottom:0; 
 
    left:0; 
 
} 
 

 
#buy-box { 
 
    width: 345px; 
 
    height: 470px; 
 
    background-color: #fff; 
 
    margin: 0 auto; 
 
    -webkit-border-radius: 4px; 
 
    -o-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 3px; 
 
    border: thin solid #ededed; 
 
} 
 

 
#top_header { 
 
    width: 100%; 
 
    margin: 0; 
 
    padding-top: 45px; 
 
} 
 

 
#top_header > h3 { 
 
    text-align: center; 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: 32px; 
 
    font-weight: 800; 
 
    color: #282828; 
 
    -webkit-text-stroke: 0.5px; 
 
    margin: 0; 
 

 
} 
 

 
#top_header > h5 { 
 
    text-align: center; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 15px; 
 
    font-weight: 300; 
 
    color: #424242; 
 
    line-height: 1.6; 
 
    margin: 0; 
 
    padding: 15px 0; 
 
    color: #a6a6a6; 
 
    -webkit-text-stroke: 0.2px; 
 
} 
 

 
#buy-inputs { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.buy-input-submit, .buy-input-text { 
 
    width: 300px; 
 
    height: 55px; 
 
    position: relative; 
 
\t margin: 0 auto; 
 
    display: block; 
 
    margin-bottom: 10px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    -webkit-text-stroke: 0.1px; 
 
} 
 

 
.buy-input-text { 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 300; 
 
    border: thin solid #efefef; 
 
    color: #4f4f4f; 
 
} 
 

 
.buy-input-text:focus { 
 
    border: thin solid #ededed; 
 
    -webkit-transition: all .4s ease; 
 
    -moz-transition: all .4s ease; 
 
    -o-transition: all .4s ease; 
 
    transition: all .4s ease; 
 
} 
 

 
.buy-input-text:focus{ 
 
    border-left: thin solid #282828; 
 
} 
 

 

 
.buy-input-submit { 
 
    color: #282828; 
 
    background-color: #fff; 
 
    border: 1px solid #282828; 
 
    border-radius: 2px; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 400; 
 
    transition: all .2s ease; 
 
    margin-top: 15px; 
 
    cursor: pointer; 
 
    font-size:115%; 
 
} 
 

 
.buy-input-submit:hover { 
 
    background-color: #289928; 
 
    color: #fff; 
 
} 
 

 
.purchase-overlay { 
 
    position:fixed; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    background-color:rgba(0,0,0,0.50); 
 

 
    display:block; 
 
    z-index:1001; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="header">THIS IS HEADER</div> 
 
    <p>paragraph 1</p> 
 
    <p>paragraph 1</p> 
 
    <div class="button"> 
 
    <a class="showModalView" href="javascript:void(0);">CLICK ME</a> 
 
    <a class="showModalView" href="javascript:void(0);">CLICK ME</a> 
 
    <a class="showModalView" href="javascript:void(0);">CLICK ME</a> 
 
    </div> 
 
    <br /> 
 
    <div class="FOOTER">THIS IS FOOTER</div> 
 

 
</div> 
 

 
<div id="buy-wrapper"> 
 
    <div id="buy-box"> 
 
    <div id="top_header"> 
 
     <h3>Lallaa</h3> 
 
     <h5> 
 
     Enter details. <br /> 
 
      You know, because reasons and stuff. <br />Just do it. 
 
     </h5> 
 
    </div> 
 
    <di id="buy-inputs"> 
 
     <input class="buy-input-text buy-input-general" type="text" placeholder="First name"> 
 
     <input class="buy-input-text buy-input-general" type="text" placeholder="Last name"> 
 
     <input class="buy-input-text buy-input-general" type="text" placeholder="Email"> 
 
     <input class="buy-input-submit buy-input-general" type="submit" value="NEXT"> 
 
    </di> 
 
    <div id="bottom"> 
 
     
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Hier sind einige Eingaben.

• Mit CSS, wenn wir das Markup wie unten Struktur (die eine abgespeckte Version ist Ihrer eigenen)

Es gibt Vor- und Nachteile - dynamische und statische - etc .. Da es versteht sich, dass Sie für eine dynamische Lösung suchen (und mit jQuery), wir das gleiche tun könnte (siehe Code-Schnipsel nächsten Code)

.button > a { 
 
    display: block; 
 
} 
 
#buy-wrapper > div { 
 
    display: none; 
 
} 
 
#buy-box1:target, 
 
#buy-box2:target, 
 
#buy-box3:target { 
 
    display: block; 
 
} 
 
.dialog-box { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 30%; 
 
    padding: 10px; 
 
    border: 2px solid red; 
 
    z-index: 1000px; 
 
    background-color: #DDD; 
 
    opacity: 0.5; 
 
}

<div> 
 
    <div class="header">THIS IS HEADER</div> 
 
    <p>paragraph 1</p> 
 
    <p>paragraph 2</p> 
 
    <div class="button"> 
 
    <a class="showModalView" href="#buy-box1">CLICK ME 1</a> 
 
    <a class="showModalView" href="#buy-box2">CLICK ME 2 </a> 
 
    <a class="showModalView" href="#buy-box3">CLICK ME 3</a> 
 
    </div> 
 
    <br /> 
 
    <div class="FOOTER">THIS IS FOOTER</div> 
 
</div> 
 
<hr> 
 
<!-- Custom dialog --> 
 
<div id="buy-wrapper"> 
 
    <div id="buy-box1" class="dialog-box">I am buying from box 1</div> 
 
    <div id="buy-box2" class="dialog-box">I am buying from box 2</div> 
 
    <div id="buy-box3" class="dialog-box">I am buying from box 3</div> 
 
</div>

• jQuery UI

$(document).ready(function() { 
 

 
    // Initialize the `dialog` object. 
 
    var dialogBox = $('#dialog-box').dialog({ 
 
    autoOpen: false, 
 
    buttons: { 
 
     "Ok": function() { 
 
     $(this).dialog("close"); 
 
     } 
 
    } 
 
    }); 
 

 
    // Attach `click` event handler to the family - showModalView 
 
    $(".showModalView").click(function(eventData) { 
 
    // Get the event target 
 
    var targetElement = eventData.target; 
 

 
    // Example: To set the "item" to buy 
 
    var item = $(targetElement).attr("data-item"); 
 
    $("#dialog-box").find("h2").html("Buy " + item); 
 

 
    // Open up the "dialog box" 
 
    $("#dialog-box").dialog("open"); 
 
    }); 
 

 
});

.button > a { 
 
    display: block; 
 
} 
 
#buy-wrapper > div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" /> 
 
<div> 
 
    <div class="header">THIS IS HEADER</div> 
 
    <p>paragraph 1</p> 
 
    <p>paragraph 2</p> 
 
    <div class="button"> 
 
    <a class="showModalView" href="#" data-item="Orange">CLICK ME 1</a> 
 
    <a class="showModalView" href="#" data-item="Apple">CLICK ME 2 </a> 
 
    <a class="showModalView" href="#" data-item="Melon">CLICK ME 3</a> 
 
    </div> 
 
    <br /> 
 
    <div class="FOOTER">THIS IS FOOTER</div> 
 
</div> 
 
<hr> 
 
<!-- Custom dialog --> 
 
<div id="buy-wrapper"> 
 
    <div id="dialog-box" title="Are we okay with order?"> 
 
    <h2></h2> 
 
    <div> 
 
     <span>First name:</span> 
 
     <input type="text" placeholder="Enter First name" /> 
 
    </div> 
 
    <div> 
 
     <span>Last name:</span> 
 
     <input type="text" placeholder="Enter Last name" /> 
 
    </div> 
 
    </div>

Answer 2

Wenn es ein HTML5-Projekt ist, dann können Sie data-* Attribute verwenden.