2016-04-11 54 views
0

我被卡住了,需要一點幫助。新的jQuery。點擊更改後使用id顯示div

試圖顯示一個具有特定ID的div ..但id會根據點擊按鈕而改變。


什麼,我試圖完成..

  • firstoption1與secondoption1會顯示一些
  • firstoption1與secondoption2會顯示一些
  • firstoption1與secondoption3會顯示一些
  • firstoption2與secondoption1將顯示一些東西
  • firstoptio N2與secondoption2會顯示一些
  • firstoption2與secondoption3將顯示

現在我堅持的東西。任何幫助將非常感激!我已經張貼在這裏我的代碼,但如果你有什麼事請讓我知道..

$(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>

回答

2

爲此,您可以使用簡單的字符串連接。

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

如果我們想象selectedFirstOption === "firstoption1"selectedSecondOption === "secondoption3"然後

selectedFirstOption + selectedSecondOption 

是一回事

"firstoption1" + "secondoption3" 

這也是同樣的事情

"firstoption1secondoption3" 

最後,通過做"#" + selectedID我們生產

"#firstoption1secondoption3" 

這是您正在尋找的選擇器。

+0

你不需要'$(「#」+ selectedID).show();'? – Wowsk

+0

@Wowsk很好,趕上!修復。 –

+0

但如何與按鈕的更改工作?選項1和選項2將隨着點擊按鈕而改變... – ToniDavisJ

1

你會需要一些變量

$(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); 
    }); 
}); 

秀行會一直執行以保持狀態,但直到您同時選擇了第一選項和第二選項jQuery的結果集將是空的,意味着什麼都不會發生

+0

這肯定會起作用,但沒有理由在收聽按鈕時更改ID的收集方式或在文檔上放置點擊處理程序。我確實喜歡製作一個點擊處理程序的想法,你可以用'$(「。firstOptionButton,.secondOptionButton」)'來完成。 –

+0

這顯然是一個部分例子。這是由操作系統來洗牌,以更好地適應他的實際使用情況。 –

+0

如果選項是動態的,則在較高容器上使用代理也會更好。您可以添加/刪除選項而無需管理點擊處理程序。 –