Question

我有一组动态单选按钮，在选中时都会显示/隐藏某些字段，而我正在尝试使用相同的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>

Answer 1

尝试更改此

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

到这个

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

请注意../

如果带有脚本的文件与层次结构中的images文件夹相距几个“图层”，则可能需要添加多个文件。

jQuery选择div来改变单选按钮点击的背景

1 个答案: