Question

我被困住了，需要一些帮助。 jQuery的新手。

尝试显示具有特定ID的div ..但id会根据点击的按钮而改变。

我想要完成的事情......

firstoption1 with secondoption1将显示一些内容
firstoption1 with secondoption2将显示一些内容
firstoption1 with secondoption3将显示一些内容
firstoption2 with secondoption1将显示一些内容
firstoption2 with secondoption2将显示一些内容
firstoption2 with 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>

Answer 1

您可以使用简单的字符串连接来完成此操作。

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

如果我们想象selectedFirstOption === "firstoption1"和selectedSecondOption === "secondoption3"那么

selectedFirstOption + selectedSecondOption

与

相同

"firstoption1" + "secondoption3"

与

也是一回事

"firstoption1secondoption3"

最后，通过"#" + selectedID我们生成

"#firstoption1secondoption3"

这是你正在寻找的选择器。

Answer 2

你需要一些变量来保存状态

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

show line将始终执行，但jquery结果集将为空，直到您同时选择第一个选项和第二个选项，这意味着什么都不会发生。

单击更改后使用id显示div

2 个答案: