CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ToniDavisJ
ToniDavisJ

Reputation: 13

display div using id after click change

I am stuck and need a little help. New to jQuery.

Trying to show a div with a certain ID.. but the id will change based on the buttons clicked.

what I am trying to accomplish..

now I am stuck. Any help would be much appreciated! I have posted my code here, but if you need anything else please let me know..

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

Upvotes: 0

Views: 224

Answers (2)

Mark Evaul
Mark Evaul

Reputation: 653

You're going to need some variables to hold states in

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

the show line will always execute, but the jquery result set will be empty until you select both a first option and a second option, meaning nothing will happen.

Upvotes: 1

Mike Cluck
Mike Cluck

Reputation: 32511

You can do this using simple string concatenation.

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

If we imagine that selectedFirstOption === "firstoption1" and selectedSecondOption === "secondoption3" then

selectedFirstOption + selectedSecondOption

is the same thing as

"firstoption1" + "secondoption3"

Which is also the same thing as

"firstoption1secondoption3"

Finally, by doing "#" + selectedID we produce

"#firstoption1secondoption3"

which is the selector you're looking for.

Upvotes: 2

Related Questions