jQuery выбирает div для изменения фона при нажатии кнопки переключателя - PullRequest
Новая
       6

jQuery выбирает div для изменения фона при нажатии кнопки переключателя

0 голосов
/ 04 августа 2011

У меня есть набор динамических переключателей, которые все показывают / скрывают определенные поля при выборе, и я пытаюсь иметь тот же блок jQuery, который показывает и скрывает поля, также показывают правильное изображение предварительного просмотра.Это для темы WordPress.Контейнер (протестированный с установкой CSS фона для изображения) называется #layoutpreview.Вот jQuery, который я использую для переключения фонового изображения: 

if (layoutchecked =="tc") 
{
   jQuery('#CWP_layout').nextAll('div').hide('')
    var layoutchecked = jQuery('.radio_wrapper').children('input:checked').attr('value') 
    if (layoutchecked =="tc") 
                {
                jQuery('#CWP_tcblk1txt').show('');
                jQuery('#CWP_tcblk1txt').addClass('setShowing');
                jQuery('#CWP_tcblk1bgcolor').show('');
                jQuery('#CWP_tcblk1icon').show('');
                jQuery('#CWP_tcblk2txt').show('');
                jQuery('#CWP_tcblk2bgcolor').show('');
                jQuery('#CWP_tcblk2icon').show('');
                jQuery('#CWP_tcblk3txt').show('');
                jQuery('#CWP_tcblk3bgcolor').show('');
                jQuery('#CWP_tcblk3icon').show('');
                jQuery('#layoutpreview').css("background-image", "url('images/previews/3-column-layout.jpg')");
                alert ("we changed it");
                }
}

HTML пишется, когда тема WordPress принимает массив и выплевывает переключатели, вот сгенерированный код HTML: 

<div id="CWP_layout" class="cwp_input cwp_radio"> 

    <label for="CWP_layout">Select Layout</label> 

     <div class="radio_wrapper"> 


       <input type="radio" name="CWP_layout" value="tc" checked='checked' class="CWP_layout"/>Three Columns<br />  
       <input type="radio" name="CWP_layout" value="tr"  class="CWP_layout"/>Three Rows<br /> 
       <input type="radio" name="CWP_layout" value="is"  class="CWP_layout"/>Image Slider<br /> 
       <input type="radio" name="CWP_layout" value="iwc"  class="CWP_layout"/>Image with Content<br />             
       <input type="radio" name="CWP_layout" value="osi"  class="CWP_layout"/>One Single Image<br /> 
       <input type="radio" name="CWP_layout" value="fsev"  class="CWP_layout"/>Full Size Embedded Video<br /> 
       <input type="radio" name="CWP_layout" value="vwti"  class="CWP_layout"/>Video with Three Images<br /> 
        </div> 
        <small>Select the layout for the theme.</small><div class="clearfix"></div> 
     <div id="layoutpreviewwrap">Layout Of Selected Theme<div id="layoutpreview"></div><br />       
     </div>    
</div>

1 Ответ

0 голосов
/ 04 августа 2011

Попробуйте изменить 

jQuery('#layoutpreview').css("background-image", "url('images/previews/3-column-layout.jpg')");

на 

jQuery('#layoutpreview').css("background-image", "url('../images/previews/3-column-layout.jpg')");

Обратите внимание на ../

Возможно, вам потребуется добавить более одного из них, если файлс помощью сценариев несколько «слоев» от папки изображений в иерархии.

...