Как различить два класса с одинаковым именем в разных CSS на одной странице - PullRequest
2 голосов
/ 24 апреля 2010

на моей странице asp.net я связываю 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>

Ответы [ 3 ]

2 голосов
/ 24 апреля 2010

Вы можете добавить второй класс к одному из элементов управления.

<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
}

Имеет смысл?

1 голос
/ 24 апреля 2010

ПРИМЕЧАНИЕ. Этот ответ представляет собой комбинацию моих комментариев для формулирования решения, которое совпадает с другим решением, опубликованным здесь, и способствует его решению.

Прежде всего, быстрый вопрос: почему у вас есть <code> вместо <script> вокруг javascript / jquery в вашем образце?

Ответ 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".

Это в основном то, как это можно сделать. Конечно, вы можете выбрать эти средства выбора даты напрямую по идентификатору через селектор без необходимости создавать другие элементы div или еще много чего, поскольку вы дали им разные имена.

1 голос
/ 24 апреля 2010

Поместите <div> вокруг части слайдера, задайте ему класс (class='myslider') и добавьте префикс слайдера css к .myname.

Сделайте то же самое с частью средства выбора даты, <div class='myDatePicker'>, и добавьте префикс css для средства выбора даты jQuery с .mYDatePicker

Это должно решить проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...