Question

在我的asp.net页面上我链接2个不同控件使用的2个css文件，但主要问题是两个类名相同，所以它们相互冲突，请告诉我如何区分他们之间。

两者都是jquery，1是滑块控件，另一个是时间选择器控件。并且它们在背景图像上存在冲突，因为我想更改滑块控件的滚动条的背景图像。请给我解决方案..

使用滑块的代码：

    <div id="time1" style="float: left; width: 100px" >
                             <code>$('#time1 input').ptTimeSelect({ popupImage: 
  '<img  alt="Select" src="../images/icon_clock_2.gif"
                                style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
                                }); </code>
                            <div >
                                <input id="s2Time1" runat="server" name="s2Time1" readonly="readonly" style="width: 60px" />
                            </div>
                        </div>

下面的代码是时间选择器：

 <div id="time2" style="float: left; width: 100px">
                            <code>$('#time2 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif"
                                style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />'
                                }); </code>
                            <div>
                                <input id="s2Time2" runat="server" name="s2Time2" readonly="readonly" style="width: 60px" /></div>
                        </div>

Answer 1

您可以在其中一个控件中添加第二个类。

<div class = "first_class second_class">
<div class = "first_class">

然后执行以下操作：

first_class {
   attributes
}

second_class {
   more attributes that may or may not write over first_class attributes
}

有意义吗？

Answer 2

在滑块部分周围放置一个<div>，给它一个类（class='myslider'），并在滑块css前加上.myname。

对日期选择器部分<div class='myDatePicker'>执行相同操作，并使用.mYDatePicker

为日期选择器jQuery添加前缀

那应该可以解决问题。

Answer 3

注意：这个答案是我的评论的组合，用于制定与此处发布的另一个解决方案相符并为之做出贡献的解决方案。

首先，快速提问：为什么样本中的javascript / jquery周围有<code>而不是<script>？

Edelcom的回答是遵循正确的方法，但他没有提供代码示例。这是我如何使用与他的基本相同的方法来接近它：

滑块代码

<div id="slider"><div id="time1" style="float: left; width: 100px">
<script type="text/javascript">$('#slider #time1 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif" style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
}); </script>
<input id="s2Time1" runat="server" name="s2Time1" readonly="readonly" style="width: 60px" />
</div></div>

在这里，我用另一个div（id = "slider"）包围了整个元素。因此，我的jQuery代码是：$('#slider #time1 input') ...

日期选择代码

<div id="datepick"><div id="time2" style="float: left; width: 100px">
<script type="text/javascript">$('#datepick #time2 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif" style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
}); </script>
<input id="s2Time2" runat="server" name="s2Time2" readonly="readonly" style="width: 60px" />
</div></div>

我在这里做了同样的事情，除了大div现在被称为"datepick"。

基本上这是如何做到的。当然，您可以通过选择器直接通过id选择那些日期选择器，而不必创建其他div或诸如此类的东西，因为您已经为它们指定了不同的名称。

如何在同一页面上区分不同css中的两个同名类

3 个答案:

滑块代码

日期选择代码