Question

所以现在我有一个页面设置，如果你单击文本，会出现一个滑块，让你选择一系列值。我想添加一个删除滑块的双击。

http://anacepts.com/main/anam/slider_select9c.html#

这是HTML：

 <!DOCTYPE html>
<html>
<head>
<style>
<!--              CSS                -->
.extra-controls {
    position: relative;
    padding: 10px 0 0;
}

</style>


<link href="css/ion.rangeSlider.css" rel="stylesheet">

<link href="css/ion.rangeSlider.skinHTML5.css " rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>      
<script src="js/ion.rangeSlider.min.js"></script>

<script src="js/myslider_new.js"></script>    

</head>
<body>

<!--                  HTML       -->

<form id="live-search" action="" class="styled" method="get">
    <fieldset>
        <input type="text" class="text-input" id="filter" value="" />
        <span id="filter-count"></span>
    </fieldset>
</form>

<div id = "div0">

<a id = "a_G" href = "#" >Games</a>

</div>

<div>

<input type="hidden"  id = "slider_G"/ >


</div>

<div>
<form action="sliderselect5.php" method="get">
<div class="extra-controls">  <input  type="hidden" id="from_G" name = "g-low" value="0"  /><input type="hidden" id="to_G" name = "g-high" value="0"  /></div>

<input type="submit" value="Submit">
</form> 
</div>


 <script>


$(document).ready(function(){

//---Selecting sliders------

    $("#filter").keyup(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;

        // Loop through the comment list
        $("a").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Selection = "+count);
    });
});
 </script>

 <script>

var $range_G = $("#slider_G"),
$inputFrom_G = $("#from_G"),
$inputTo_G = $("#to_G"),
instance_G;

$("#a_G").on("click", function () {
    createSlider_G();
});




</script>


</body>
</html>

Answer 1

有一个dblclick事件，我希望您想要添加一个监听器

$("#a_G").on("dblclick", function () {
    # removeSlider_G();
});

Answer 2

您可以使用jQuery .dblclick（）函数

<script type="text/javascript">
    $( "#a_G" ).dblclick(function() {
       alert( "DoubleClick!" );
       ....
    });
</script>

但我认为要显示/隐藏滑块你可以使用相同的点击功能，请查看以下代码：

<script type="text/javascript">

    //assign a variable hidden 
    var hidden = 1;

    $( "#a_G" ).click(function() {

      if(hidden == 1)
      {
            //if the slider is hidden.. 
            alert("Show the slider");

            //make the slider visible
            //change the value of the variable hidden as 0
            hidden = 0;
      }
      else
      {
            //if the slider is visible
            alert("Hide the Slider");

            //make the slider invisible
            //change the value of the variable hidden as 1
            hidden = 1;
      }

    });

</script>

单击显示，双击以隐藏滑块

2 个答案: