【问题标题】:jQuery selecting div to change background on radio button clickjQuery选择div来改变单选按钮点击的背景
【发布时间】:2011-08-04 03:46:23
【问题描述】:

我有一组动态单选按钮,它们在选择时都显示/隐藏某些字段,我试图让显示和隐藏字段的相同 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> 

【问题讨论】:

  • 这里没有足够的信息来知道什么是行不通的。您将不得不展示更多代码。
  • 同样的脚本适用于我。您是否缺少图像网址前面的“/”?检查您的图片位置。
  • 添加了更多代码。 jQuery 所在的图像(并在 css 中测试)位于图像 --> 预览 --> 文件名.jpg 中。当我在 CSS 中使用相同的路径时,它就像我设置为静态的图像的魅力一样。
  • 用背景颜色“红色”测试,效果很好
  • 嗯。你检查过区分大小写吗?在您的代码中,您使用images/previews/3-column-layout.jpg,但在您的评论中,您声明Images --&gt; Previews --&gt; Filename.jpg,即大写的文件夹名称...

标签: jquery image show


【解决方案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')");

注意../

如果带有脚本的文件与层次结构中的图像文件夹相距几个“层”,您可能需要添加不止一个。

【讨论】:

  • 也没有用,但我认为我上面发布的课程选项对我有用。如何从 div 中剥离类,仅使用 removeClass() 并将其留空?
  • 是的,只需使用removeClass()
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-05-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多