görüntülü reklamdaki tıklamayı değiştirdikten sonra gösterme kimliği

Question

Takılıyorum ve biraz yardıma ihtiyacım var. JQuery'ye yeni.

Belirli bir kimliğe sahip bir div gösterilmeye çalışılıyor ... ancak kimlik tıklanan düğmelere göre değişecektir. Başarmak ne çalışıyorum

---

.. secondoption1 ile

• firstoption1 şey gösterecektir secondoption3 ile görüntüler secondoption2 şey
• firstoption1 gösterecektir şey
• firstoption2 ile birlikte
• firstoption1 secondoption1 bir şey gösterecek
• firstoptio secondoption2 ile n2 Something

şimdi şaşırıp gösterecektir secondoption3 ile bir şeyler

firstoption2 gösterecektir. Herhangi bir yardım çok takdir edilecektir! Burada kodumu yayınlandı, ancak herhangi bir şey gerekiyorsa başka lütfen bana bildirin var ..

$(document).ready(function() { 
 

 
    var selectedFirstOption = "firstoption1"; 
 
    var selectedSecondOption = "secondoption1"; 
 

 
    $(".optionsSets").hide(); 
 

 
    $(".firstOptionButton").click(function() { 
 
    selectedFirstOption = $(this).attr('id'); 
 
    $(".results").html("#" + selectedFirstOption + selectedSecondOption); 
 
    }); 
 

 
    $(".secondOptionButton").click(function() { 
 
    selectedSecondOption = $(this).attr('id'); 
 
    $(".results").html("#" + selectedFirstOption + selectedSecondOption); 
 
    }); 
 

 
});

button { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <button id="firstoption1" class="firstOptionButton">First Option 1</button> 
 
    </li> 
 
    <li> 
 
    <button id="firstoption2" class="firstOptionButton">First Option 2</button> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li> 
 
    <button id="secondoption1" class="secondOptionButton">Second Option 1</button> 
 
    </li> 
 
    <li> 
 
    <button id="secondoption2" class="secondOptionButton">Second Option 2</button> 
 
    </li> 
 
    <li> 
 
    <button id="secondoption3" class="secondOptionButton">Second Option 3</button> 
 
    </li> 
 
</ul> 
 
<div id="firstoption1secondoption1" class="optionsSets"> 
 
    <p>Showing: First Option 1 + Second Option 1</p> 
 
</div> 
 
<div id="firstoption1secondoption2" class="optionsSets"> 
 
    <p>Showing: First Option 1 + Second Option 2</p> 
 
</div> 
 
<div id="firstoption1secondoption3" class="optionsSets"> 
 
    <p>Showing: First Option 1 + Second Option 3</p> 
 
</div> 
 
<div id="firstoption2secondoption1" class="optionsSets"> 
 
    <p>Showing: First Option 2 + Second Option 1</p> 
 
</div> 
 
<div id="firstoption2secondoption2" class="optionsSets"> 
 
    <p>Showing: First Option 1 + Second Option 1</p> 
 
</div> 
 
<div id="firstoption2secondoption3" class="optionsSets"> 
 
    <p>Showing: First Option 1 + Second Option 1</p> 
 
</div> 
 

 
<div class="results"> 
 

 
</div>

Answer 1

Bu kullanarak basit dize birleştirme yapabilirsiniz.

var selectedID = selectedFirstOption + selectedSecondOption; 
$("#" + selectedID).show(); 

biz selectedFirstOption === "firstoption1" ve selectedSecondOption === "secondoption3" sonra

selectedFirstOption + selectedSecondOption 

Nihayet da

"firstoption1secondoption3" 

aynı şeydir

"firstoption1" + "secondoption3" 

aynı şey olduğunu hayal ederse "#" + selectedID yaparak biz aradığınız seçici olan

"#firstoption1secondoption3" 

üretirler. ,

Answer 2

Sen

$(document).ready(function() { 

    var selectedFirstOption = ""; 
    var selectedSecondOption = ""; 

    $(".optionsSets").hide(); 

    $(document).on('click', 'button', function (event) { 
     $(".optionsSets").hide(); 

     var btn = $(event.target); 
     if (btn.is('.firstOptionButton') { 
      selectedFirstOption = btn.get(0).id; 
     } else if (btn.is('.secondOptionButton') { 
      selectedSecondOption = btn.get(0).id; 
     } 

     $('#' + selectedFirstOption + selectedSecondOption).show(); 
     $(".results").html("#" + selectedFirstOption + selectedSecondOption); 
    }); 
}); 

gösteri çizgi her zaman çalıştırır içinde durumlarını tutmak için bazı değişkenleri ihtiyacımız olacak, ancak bir ilk seçeneği ve ikinci bir seçeneği hem seçene kadar jquery sonuç kümesi boş olacak anlam hiçbir şey olmayacak.