【问题标题】:Triggering click from radio toggle cookie not working从单选切换 cookie 触发点击不起作用
【发布时间】:2014-03-31 22:37:06
【问题描述】:

根据this Stack Overflow q/a 中的建议,我正在尝试通过 cookie 触发点击。 cookie 设置在单选按钮选择上。被切换的两个 div 之一需要设置为隐藏。

问题:最初的 if 语句没有触发点击。

if($.cookie('light-or-dark')) {
    $($.cookie('light-or-dark') + '-radio').attr('checked', true).trigger('click');
    } else {
    $('#theme-schemes-dark').hide();
  };

// the toggle on radio button change function
$('[name=light-dark-radio]').change(function(){
    $('#theme-schemes-light').toggle('medium');
    $('#theme-schemes-dark').toggle('medium');

    // set cookie on toggle state
    $.cookie('light-or-dark', '#theme-schemes-' + this.value, {expires:365, path: '/'})
  })

HTML:

<div class="selection-wrap">
  <label>
    <input type="radio" name="light-dark-radio" id="theme-schemes-light-radio" value="light" checked>
    Light
  </label>
  <label>
    <input type="radio" name="light-dark-radio" id="theme-schemes-dark-radio" value="dark">
    Dark
  </label>
</div>

<!-- first div -->
<div class="selection-wrap" id="theme-schemes-light">
  <a class="theme-scheme-btn color-box bg-blue" id="defaultThemeScheme" href="#">Light 1</a>
  <a class="theme-scheme-btn color-box bg-yellow" href="#">Light 2</a>
</div>

<!-- second div - hidden by default -->          
<div class="selection-wrap" id="theme-schemes-dark" style="display: none">
  <a class="theme-scheme-btn color-box dark-color-blue" href="#">Dark 1</a>
  <a class="theme-scheme-btn color-box dark-color-yellow" href="#" >Dark 2</a>
</div>

A FIDDLE to better illustrate

非常需要洞察力。

【问题讨论】:

  • 这个对象是建立在 '$($.cookie('light-or-dark') + '-radio')' 的吗,console.log($($.cookie('light-or -dark') + '-radio')) 显示?
  • 嗯...它返回为未定义。当运行与警报相同的命令时,我得到[object Object]
  • 你能用这个单选按钮和两个 div 粘贴你的 html 代码吗..
  • 添加了 html 代码并创建了一个小提琴。拿走小提琴中的初始 cookie jQuery 以查看它的工作原理。将其重新添加以查看是否损坏。

标签: javascript jquery html cookies click


【解决方案1】:

试试这个,我更改恢复 div 的代码

  if($.cookie('light-or-dark')) {

$($.cookie('light-or-dark') + '-radio').attr('checked', true);
   $('#theme-schemes-light').hide();
   $('#theme-schemes-dark').hide();
   $($.cookie('light-or-dark')).show();
} else {
$('#theme-schemes-dark').hide();
};

$('[name=light-dark-radio]').change(function(){
$('#theme-schemes-light').toggle('medium');
$('#theme-schemes-dark').toggle('medium');
// set cookie on toggle state
$.cookie('light-or-dark', '#theme-schemes-' + this.value, {expires:365, path: '/'});
})

【讨论】:

  • 成功了!我想试图在收音机上获得点击操作对这个来说不是一个好方法。非常感谢。
【解决方案2】:

我似乎没有同样的问题。 (http://jsfiddle.net/jaLQZ/3/)

  $($.cookie('light-or-dark') + '-radio').click(function(){
    alert( 'click' + this.value );
  });

  if($.cookie('light-or-dark')) {
    $($.cookie('light-or-dark') + '-radio').attr('checked', true).trigger('click');
    } else {
    $('#theme-schemes-dark').hide();
  };

  $('[name=light-dark-radio]').change(function(){
    $('#theme-schemes-light').toggle('medium');
    $('#theme-schemes-dark').toggle('medium');
    // set cookie on toggle state
    $.cookie('light-or-dark', '#theme-schemes-' + this.value, {expires:365, path: '/'});
  })

也许您使用的浏览器不支持 cookie 插件?

【讨论】:

  • 不,我使用的是最新的 Chrome 浏览器,而且 Cookie 确实可以正常工作。问题在于,在切换页面时,切换的 div 会恢复为默认值(浅色),即使在单击另一个页面之前选择了深色也是如此。所以似乎由于某种原因,收音机没有通过最初的if 语句被点击。
猜你喜欢
  • 1970-01-01
  • 2011-08-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-23
  • 1970-01-01
  • 2022-01-20
相关资源
最近更新 更多