Question

我试图在我的html中插入自定义jquery滑块：

<p><input type="text" data-slider="true" data-slider-theme="volume" />
<span style="vertical-align: top"></span>
<script>
$("[data-slider]")
  .bind("slider:ready slider:changed", function (event, data) {
    $(this).nextAll("span").html(data.value.toFixed(3));
  });
</script></p>

这是在模态窗口内。当我将其硬编码到模态窗口时，它工作正常，样式很完美。

然而，在我的javascript中，当我在插入它的div上使用带有jquery或.innerhtml的.append时，它显示为普通文本框，没有自定义滑块css，如硬编码版本所示。

                        insert_review.innerHTML += '\
                        <li class="review">\
                            <center>\
                                <p><input type="text" data-slider="true" data-slider-theme="volume" />\
                                <span style="vertical-align: top"></span>\
                                <script>\
                                $("[data-slider]")\
                                  .bind("slider:ready slider:changed", function (event, data) {\
                                    $(this).nextAll("span").html(data.value.toFixed(3));\
                                  });\
                                <\/script></p>\
                            <\/center>\
                        </li>\
                        ';

Answer 1

使用css类而不是内部HTML样式。从长远来看，当你需要应用大量风格时，这是更好的做法。但是，是的，一旦你这样做，只需添加！important标签。无论如何，这将使这个属性成为现实。

<style>
    .myClass{
        vertical-align: top !important;
    }
</style>

使用innerHTML时，CSS属性会被覆盖

1 个答案: