根据选择隐藏/显示dom元素

时间:2015-02-26 20:42:50

标签: javascript dom-manipulation advanced-custom-fields

我一直在努力解决这个问题很长一段时间。让我试着尽可能清楚地解释它:

我正在创建一个Wordpress网站(从头开始),供用户发布成品,评论和更多内容。发布发生在Wordpress的后端。 我使用ACF Pro设置完全自定义的帖子编辑页面。

当用户发布新评论时,他/她应该从ACF关系字段中选择产品(我们将其称为“目标产品”)。 我希望其余的ACF字段保持隐藏,直到用户选择至少一个目标产品。

ACF关系字段有两个div,其中包含以下类:

  1. choices是包含ulli项中所有产品的div。每个列表项都是产品
  2. values是包含ulli项中所有已挑选产品的div。每个列表项都是一个挑选的产品。
  3. 可以通过在choices div中点击它们来“挑选”产品。这意味着,在添加新评价时,ul div中的values包含列表项。

    所以我需要Javascript来执行这样的功能:

    var $hiders = $('#excerpt, #intro, #text, #conclusion, #rating, #pros, #cons');
    var x = $('#target-product .values ul.list li').length;
    if ( x == 0 ) {
        hiders.fadeOut(500);
    } else {
        hiders.fadeIn(500);
    }
    

    每当choices div中的li被删除时,values div中的列表项都会被点击(旁边有一个删除按钮)列表项目)。

    $hiders包含x = 0

    时要隐藏的div

    由于这是一个至关重要的功能(用户依赖此工作才能继续)我需要与所有浏览器100%兼容。 我不确定什么是最好的方法才能使这项工作。

    谢谢!

    修改x = 0更改为x == 0

0 个答案:

没有答案