Question

我已经在.less中创建了一个对象，并且我在php文件中创建了一些按钮，当在php文件中单击该按钮时我希望隐藏一些对象。这是我的PHP代码

 <label for="select-pattern">Select</label>
          <select name="" id="select" data-native-menu="false">
            <option data-placeholder="true">Select</option>
            <option name="asdf" value="pat">Select this</option>
            <option name="fdas" value="tap">select now</option>
    <select>

这是我的JS代码，

    $(document).ready(function(){
   $("#asdf").click(function(event){
     //Your actions here
       $('#object1, #object2').hide();

   });
 });

我创建对象的文件越少，这里就是

的代码

 #object1, #object2 {
    width: 46px;
    height: 23px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    z-index: 10;
  }

为什么隐藏功能不起作用？是他们在代码中的错误？

Answer 1

你有HTML而不是PHP。我不相信点击事件对选项有效。你必须创建一个按钮，并将asfd设置为id而不是元素的名称。

<input type="button" id="asdf" value="Hide objects">

Answer 2

试试这个。（假设object1和object2引用了DOM中的html元素）。

您需要在选择中更改事件并检查其值。如果匹配，则隐藏object1，object2。

    <label for="select-pattern">Select</label>
              <select name="" id="select" data-native-menu="false">
                <option data-placeholder="true">Select</option>
                <option name="asdf" value="pat">Select this</option>
                <option name="fdas" value="tap">select now</option>
        <select>
            <div id="object1">Object 1</div>
            <br>
                <br>
                <div id="object2">Object 2</div>
$().ready(function()
{
$("select").change(function(){
      if($(this).val() == "pat")
       $('#object1, #object2').hide();
    else
        $('#object1, #object2').show();

   });
});

http://jsfiddle.net/9tvmac08/1/

Answer 3

您可以使用：

$(document).ready(function(){
    $("#test").on("change", function(){
        var id = $(this).val();
        $(".objects #"+id).toggle();
    });
});

或者，根据您的代码：

$("#object1, #object2").toggle();

https://jsfiddle.net/8mxqvLwb/

如果要将某个事件绑定到select中的option元素，则必须将其绑定到select元素。

JS函数.hide

3 个答案: