Question

在我的html中我有很多按钮，我希望能够只显示一个特定的按钮，一旦通过使用switch语句到目前为止点击了某个想象，这就是我试过的

HTML：

<div id = "displayedImages">
<ol>
      <li class="ui-state-default">
    <a href="javascript:void(0);" style="background-position: -0px -0px" title=" Pink Flower" data-designName="pink Flower"></a>
    </li>
    <li class="ui-state-default">
  <a href="javascript:void(0);" style="background-position: -0px -100px" title="red Rocks" data-designName="red Rocks"></a>
 </li>
</ol>

<div id="buttons" style="display: none;"> 
  <ol>
  <li class="ui-state-default">
   <a href="javascript:void(0);" style="background-position: -50px -0px" title="first button" data-designName="first button"></a>
  </li>
     <li class="ui-state-default">
 <a href="javascript:void(0);" style="background-position: -80px -1px" title="second button" data-designName="second button"></a>
 </li>
  <li class="ui-state-default">
    <a href="javascript:void(0);" style="background-position: -301px -1px" title="third button" data-designName="third button"></a>
  </li>
</ol>

使用Javascript：

jQuery 
    //jQuery("#buttons").show("blind");
            console.log("buttons clicked"); 
            switch(jQuery(event.target).attr("data-designName")){
            case "pink Flower":
            target = "first button";
                break;
            case "red Rocks":
                break;


            }
        }

Answer 1

您可以在按钮中添加ID，并使用show / hide显示和隐藏所需的按钮。

switch(jQuery(event.target).attr("data-designName")){
            case "pink Flower":
                //target = "first button";
                $("#id_of_button_that_you_want_to_hide").hide();
                break;
            case "red Rocks":
                $("#id_of_button_that_you_want_to_hide").hide();
                break;
            }

或者您可以禁用所有这些内容并删除要显示的属性

<div id="buttons" style="display: none;"> 
  <ol>
  <li class="ui-state-default">
   <a id="firstButton" href="javascript:void(0);" style="background-position: -50px -0px" title="first button" data-designName="first button" disabled="true"></a>
  </li>
     <li class="ui-state-default">
 <a id="secondButton" href="javascript:void(0);" style="background-position: -80px -1px" title="second button" data-designName="second button" disabled="true"></a>
 </li>

switch(jQuery(event.target).attr("data-designName")){
                case "pink Flower":
                    //target = "first button";
                    $("#firstButton").attr("disabled", false);
                    break;
                case "red Rocks":
                    $("#secondButton").attr("disabled", false);
                    break;
                }

使用带有switch语句的jQuery显示某些按钮

1 个答案: