Question

我的页面上有几种不同类型的UI小部件。所有人.ui-widget-content都有一个共同的类。我需要为每个类设置不同的样式，因此我为HTML元素分配了唯一的ID或类。这适用于一种类型的小部件（我可以使用JS中的dialogClass选项来分配类的对话框），但是另一种类型的小部件（滑块）仍将仅继承.ui-widget-content的样式当我为#id .ui-widget-content指定一个样式来获取感兴趣的特定元素时。我现在对如何覆盖原始风格感到茫然。

HTML：

<div id="opacitySlide" class="slider">
     <div id="opacityVal" class="ui-slider-handle"></div>
</div>
<div id="habClassify-dialog" title="Habitat Classification">
    <div id="HabClassifyGPService">
        //whole bunch of stuff
    </div>
</div>
<div id="error-dialog" title="ERROR"></div>
<div id="success-dialog" title="SUCCESS">
    <p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>

CSS：

//This one doesn't work and get overridden by the default style .ui-widget-content    
#opacitySlide .ui-widget-content {
    border: 1px solid black;
}

//This one does work, these classes are assigned in the JS, NOT the HTML
.habClassify-dialog .ui-widget-content,
.error-dialog .ui-widget-content,
.success-dialog .ui-widget-content {
    border: none;
}

我也尝试使用我在HTML中分配的自定义类，而不是非工作CSS的id，但没有运气。

.slider .ui-widget-content {
    border: 1px solid black;
}

这是JS代码：

//Creates the popup dialog for the habitat classification button
          var habClassifyDialog = $("#habClassify-dialog").dialog({
              autoOpen: false,
              height: "auto",
              width: 400,
              modal: true,
              dialogClass: 'habClassify-dialog',
              buttons: [{
                  id: "classify",
                  text: "Classify habitat",
                  click: upload
              }],
              close: function () {
                  $('#uploadForm')[0].reset();
                  $('#validation-text').empty();
              }
          });
      $('#classifyHab').click(function() {
              habClassifyDialog.dialog("open");
      });

      //Creates the popup dialog that contains error messages
      var errorDialog = $("#error-dialog").dialog({
          autoOpen: false,
          height: "auto",
          width: 1000,
          modal: true,
          dialogClass: 'error-dialog',
          buttons: [{
              id: "error-ok",
              text: "Ok",
              click: function () {
                  errorDialog.dialog("close");
              }
          }]
      });

      //Creates the popup dialog that shows the success message
      var successDialog = $('#success-dialog').dialog({
          autoOpen: false,
          height: "auto",
          width: 400,
          modal: true,
          dialogClass: 'success-dialog',
          buttons: [{
              id: "success-ok",
              text: "Ok",
              click: function () {
                  successDialog.dialog("close");
                  if (habClassifyDialog.dialog('isOpen')) {
                      habClassifyDialog.dialog("close");
                  }
              }
          }],
          close: function () {
              if (habClassifyDialog.dialog('isOpen')) {
                  habClassifyDialog.dialog("close");
              }
          }
      });

      //Create the opacity slider
      var handle = $("#opacityVal");
      $("#opacitySlide").slider({
          range: "min",
          value: 100,
          min: 0,
          max: 100,
          create: function () {
              handle.text($(this).slider("value") + "%");
          },
          slide: changeOpacity,
          change: changeOpacity
      });

如果您以前没有使用过jQuery UI，它会在加载时自动为窗口小部件添加一大堆默认样式，这就是为什么你在我的HTML中看不到class="ui-widget-content"的原因，没有必要声明它

Answer 1

好吧，我已经正式犯下了最愚蠢的错误。考虑到HTML是使用我分配的正确自定义ID生成的，我认为必须有一种方法可以使用该ID访问ui-widget-content类。就像将它们链接在一起一样简单，在我测试之前，我在它们之间留下了一个空间。

问题CSS（不起作用）：

#opacitySlide .ui-widget-content {
      border: 1px solid black;
}

简单修复（删除id和class之间的空格）：

#opacitySlide.ui-widget-content{
     border: 1px solid black;
}

为了完整起见，解释是如果在这些项之间留一个空格，它认为HTML的结构如下：

<div id="opacitySlide">
    <div class="ui-widget-content"></div>
</div>

当我的HTML结构真的像这样：

<div id="opacitySlide" class="ui-widget-content"></div>

jQuery UI小部件CSS无效问题

1 个答案: