JQuery - 使用动态图像作为单选按钮等

时间:2013-01-15 01:27:17

标签: jquery image input radio

我对JS几乎没有任何知识,必须完成以下任务:

  • 我们使用第三部分模块,使用magento在选项中启用图像。我不能修改以下的html结构,只能通过jquery。
  • 我们想隐藏RADIO BUTTON并使用缩略图作为按钮
  • 选择后,图像将获得不同的样式(不完全知道,可能是边框)
  • 此外,输入的名称(在SPAN中)应出现在图像上方的某处。
  • 造型,将图像并排放置,是CSS的小菜一碟。问题出在Jquery上。此外,工具提示还可以。

我们希望如何看待:http://www.inusual.com.br/chaise-anelideos.html 今天怎么样:http://www.inusual.com.br/namoradeira-francesca.html 它们的行为不同,因为它们是不同的模块。

嗯,HTML代码基本上是这样的:

<ul class="options-list">
  <li>
    <a class="img-radio">
      <img class="small-image-preview" src="#"/>
    </a>
    <input class="radio required-dependent" type="radio" value="somevalue" onclick="dependentOptions.select(this);opConfig.reloadPrice();">
    <span class="label">
      <label for="xxx">Option Name</label>
    </span>                                 
  </li>
  <li>
    <a class="img-radio">
      <img class="small-image-preview" src="#"/>
    </a>
    <input class="radio required-dependent" type="radio" value="somevalue" onclick="dependentOptions.select(this);opConfig.reloadPrice();">
      <span class="label">
    <label for="xxx">Option Name</label>
    </span>                                 
  </li>
</ul>

我尝试的jQuery部分是这样的:

jQuery(window).load(function()
{
  jQuery('li a.img-radio').click( function(){
  jQuery('li a.img-radio.selected').removeClass('selected');
  jQuery(this).addClass('selected');
  jQuery(this).find('input:radio').attr('checked','checked');
});
})

有关如何使这项工作的任何提示? 非常感谢!

1 个答案:

答案 0 :(得分:1)

您无法执行jQuery(this).find('input:radio'),但可以将其替换为:

jQuery(this).find('input[type=radio]')

如果您要将收音机设置为选中,attr('checked' , 'checked')可能会有效,但我更喜欢这个:

jQuery(this).find('input[type=radio]').checked = true;