Question

我正在尝试使用Jquery创建一个滑块并将输入存储在<input type="text" readonly>中。这适用于我只是将输入类型放在html页面的主体中，但是当我将它放在弹出窗口div中时。然后它在输入标签周围创建一个额外的div（我猜？）继承了popup-window div的css。因此，它周围有一个真正庞大的边界。

我在检查Chrome中的元素时注意到了创建的div。无论如何要么让Jquery不创建不必要的div或者至少从它中移除继承的css并使其不可见。

Html：

<span style='position:absolute; bottom:5px; left:15px;'>
            <a href="#vote" id="vote-button" data-rel="popup" 
                class="ui-btn ui-btn-inline ui-corner-all" 
                data-position-to="window"
                data-transition="fade">
                Vote
            </a>
        </span>
    <div data-role="popup" id="vote" style="width:300px; margin:auto; overflow:none;" class="ui-content">

                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>

                    <br>
                    <button href="#main" class="ui-btn ui-btn-inline ui-corner-all" style="position:relative; width:100%; margin:0 auto">Skicka</button>
        <p>
          <label for="amount"></label>
          <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
        </p>
    </div>

Javascript / jQuery：

    $( "#slider" ).slider({
  value:100,
  min: 0,
  max: 500,
  step: 50,
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.value );
  }
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );

}）;

我按照这个例子来说明滑块：
https://jqueryui.com/slider/#rangemax
这个弹出窗口示例：w3schools example

Codepen.io：Error case

干杯

Answer 1

更新：

找到更好的方法，查看HERE on CODEPEN：

$("#vote-button").click(function() {
     $("#vote").find(".ui-input-text").remove(); 
})

这将完全删除包裹在输入框周围的div而不会有任何痛苦。

查看CODEPEN中的工作示例。

我解决的方法是首先从输入框周围的div元素中删除所有类，如下所示：

  $("#vote-button").click(function() {

       $("#vote").find(".ui-input-text").removeClass("ui-body-inherit").removeClass("ui-corner-all").removeClass("ui-shadow-inset").removeClass("ui-input-text");

   })

然后，当您单击输入框时，Bootstrap会添加一个新类ui-focus。有两种方法可以做到这一点。第一个是jQuery：

$("#amount").click(function() {
   if ($(this).closest("div").hasClass("ui-focus")) {
         $(this).closest("div").removeClass("ui-focus");
   }
})

它可以工作，但它会在很短的时间内显示盒子阴影并快速消失。另一种方法是使用CSS：

.ui-focus {
    box-shadow: none !important;
}

这种方法很危险，因为它会破坏所有其他使用此类在点击和激活时闪耀的元素。

使用jQuery删除Bootstrap创建的输入框周围的无内容div

1 个答案: