Jquery переключить фон? - PullRequest
Новая
       17

Jquery переключить фон?

0 голосов
/ 09 сентября 2009
неделю

DKK

"id =" radio2 "value =" 75 "/>

У меня есть куча этих div-записей, сгенерированных циклом while, поэтому я хочу добиться этого: КОГДА щелкают входные данные внутри записи, я хочу изменить фоновое изображение записи div, но если я выберу другое радио в другом элементе div .. I Мне бы хотелось, чтобы все предыдущие изменения (такие как предыдущее изменение фона) исчезли и изменили фон текущего div. Вот что я пытался сделать, может быть, вы можете помочь ... вот jquery ниже 

$("input").click(function() {

             $(this).parent("div").toggle(function() {
             $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
             }, function() {
             $(this).parent("div").css("background", "url(images/div_bg.png)");

             });

Что-то не работает .. Я имею в виду, что код inst работает вообще .. кто-нибудь может мне помочь? спасибо

Я пробовал оба варианта: 

$("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").addClass("highlight");
                     }
                     else {
                         $(this).parent("div").removeClass("highlight");
                     }
                 });
             });

И 

$("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
                     }
                     else {
                         $(this).parent("div").css("background", "url(images/div_bg.png)");
                     }
                 });
             });

по какой-то причине он вообще не работает, не меняет фон, возможно, он должен что-то делать с приведенным выше кодом, вот полный сценарий: 

 <script type="text/javascript">

         $(document).ready(function() {

             $(".left_navigation a:last").toggleClass('bolder');


             $("input").each(function() {
                 var element_value = $(this).val();
                 $(this).prev("p").append(" " + element_value + ",-");
             });


             $("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").addClass("highlight");
                     }
                     else {
                         $(this).parent("div").removeClass("highlight");
                     }
                 });
             });




         });

</script>

Ответы [ 3 ]

3 голосов
/ 09 сентября 2009

Первая непосредственная проблема, которую я вижу, заключается в том, что в вашем jQuery отсутствует }); в конце, если вы просто не забыли вставить его туда. Это помешало бы ему делать что-либо кроме выдачи ошибки ...

Это упрощенная версия, которую вы пробовали ранее. Это может по крайней мере сделать отладку немного легче. 

<script type="text/javascript">
$(document).ready(function(){
    $("input").click( function() { 
         $("input").parent("div").removeClass("highlight");
         $(this).parent("div").addClass("highlight");
      });
  });
</script>

Хотя, я не вижу ничего заведомо неправильного в том, что вы пробовали раньше, что заставляет меня задуматься, соответствует ли $("input") тому, что вы думаете. Я бы, по крайней мере, предупредил бы некоторые вещи внутри вашей функции щелчка для проверки работоспособности. Я на самом деле несколько раз обнаруживал, что мои $(document).ready стреляли, прежде чем я думал, что это было, то есть, прежде чем мои входные данные были готовы из-за моей структуры ...

1 голос
/ 09 сентября 2009

Есть несколько проблем:

  • Вы используете Toggle и функция Toggle:

Если они показаны, переключение делает их скрытый (используя метод скрытия). Если они скрыты, тумблер делает их показано (с использованием метода show).

Вы должны спросить, проверено ли радио

  • Вы должны вызвать каждую функцию, чтобы изменить другие значения деления радиосвязи

  • Вы должны вызвать функцию $(document).ready()

Образец ( Предупреждение: Javascript - не мое лучшее оружие ): 

<script>
$(document).ready(function(){
    $("input").click( function() { 
         $("input").each(function() { 
             if (this.checked) {
                $(this).parent("div").css("background-color", "green") }
             else {
                $(this).parent("div").css("background-color", "red")}
          });
      });
  });
</script>

Примечание: я использовал цвет фона для лучшего тестирования, но вы хорошо используете фон.

0 голосов
/ 09 сентября 2009

вам может понадобиться использовать 'background-image' вместо просто 'background' для установки изображений.

edit: думал, что раньше у меня были проблемы со свойством css 'background' в jQuery, но, только что протестировав его в различных браузерах, кажется, что я либо ошибался, либо исправлялся в версиях jQuery, так как работал с ним.

...