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

我有一组动态单选按钮，当选中时显示/隐藏某些字段，我试图让显示和隐藏字段的jQuery块也显示正确的预览图像。这是一个wordpress主题。容器（用CSS设置背景测试图像）称为#layoutpreview。这里是jQuery的我使用切换背景图像：jQuery选择div来改变单选按钮的背景点击

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>

来源

2011-08-04 Brenden Clerget

这里没有足够的信息来了解什么是不工作的。你将不得不展示更多的代码。 – jfriend00

相同的脚本适用于我。你是否错过了图片网址的'/'盈方？检查您的图像位置。 – KishoreK

增加了更多的代码。从jQuery所在的位置（并在CSS中进行测试）的图像位于图像 - >预览 - > Filename.jpg中。当我在CSS中使用相同的路径时，它就像我设置静态图像的魅力一样。 –

尝试修改此

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

这个

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

注意../

您可能需要添加这些不止一个，如果有脚本文件是几个“层”从层次结构的图像文件夹了。

来源

2011-08-04 04:28:44

也没有工作，但我认为我上面发布的课程选项将适用于我。如何从div剥离类，只需使用removeClass（）并将其保留为空？ –

是的，只需使用'removeClass（）'。 –

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

回答

相关问题