Question

更新：问的原始问题得到了解答。但是，代码揭示了所有人。所以，我在下面修改了我的问题：

所以我有以下动态生成的html通过php

<div class="image-link link-posttypes mainSelector1">
    <select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]">
        <option value="">default</option>
        <option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option>
        <option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option>
    </select>
</div>

<div class="image-link link-pages1">
    <select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]">
        <option value="50" class="level-0">About</option>
        <option value="65" class="level-0">Contact</option>
        <option value="2" class="level-0">Sample Page</option>
        <option value="60" class="level-0">Staff</option>
    </select>
</div>

<div class="image-link link-posts1">
    <select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]">
        <option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option>
    </select>
</div>

<div class="image-link link-custom1">
    <input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]">
</div>

***然后重复四次：＃1进入2..3 ... 4（此时最多为4）。

我能够标记div .classes，选择#ids和选项类。但是，我希望能够做的是基于从div .link-posttypes中选择的选项，我想透露.link-pages（如果页面被选中）或.link-posts（如果选择了帖子）和。所有其他人的链接自定义（默认除外）。

因此，在屏幕上写入时应该只有初始div，一旦用户选择了一个项目，就会显示相应的div。

我从未在jQuery或javascript中开发过任何东西。这是我的处女航。任何帮助将不胜感激！

***此外，这将通过外部js文件加载。

Answer 1

这是最终的答案：

jQuery(document).ready(function($) {

$(".link-posttypes select").change(function(){
   var selectedVal = $(":selected",this).val();

   if(selectedVal=="post"){
        $(this).parent().nextAll(".link-pages").hide();
        $(this).parent().nextAll(".link-posts").slideDown('slow');
        $(this).parent().nextAll(".link-custom").hide();
   }else if(selectedVal=="page"){
        $(this).parent().nextAll(".link-pages").slideDown('slow');
        $(this).parent().nextAll(".link-posts").hide();
        $(this).parent().nextAll(".link-custom").hide();
   }else if(selectedVal!=""){
        $(this).parent().nextAll(".link-pages").hide();
        $(this).parent().nextAll(".link-posts").hide();
        $(this).parent().next().nextAll(".link-custom").slideDown('slow');
   }else{
        $(this).parent().nextAll(".link-pages").hide();
        $(this).parent().nextAll(".link-posts").hide();
        $(this).parent().nextAll(".link-custom").hide();
   }
});
});

jQuery(document).ready(function($) {

$(".image-content select").change(function(){
   var selectedVal = $(":selected",this).val();

   if(selectedVal=="content-limit"){
        $(this).parent().next().nextAll(".content-limit-chars").slideDown('slow');
        $(this).parent().nextAll(".content-custom").hide();
   }else if(selectedVal=="custom-content"){
        $(this).parent().nextAll(".content-limit-chars").hide();
        $(this).parent().next().nextAll(".content-custom").slideDown('slow');
   }
});
});

感谢您的帮助！

Answer 2

假设你正在输出正确的ID，你可以这样做（注意我替换了id）：

  $(window).load(function(){
    // hide all the divs except the posttypes
    $('.image-link').not('.link-posttypes').hide();
    $('#wp_accordion_images_20110630022615_post_type').change(function() {
        var divSelector = '.link-' + $(this).val();
        $('.image-link').not('.link-posttypes').hide();
        $(divSelector).show();

    });
  });

另外，请考虑更改options这样的内容：

<option value="posts" class="post-type">Post</option>
<option value="pages" class="post-type">Page</option>
<option value="menu_items" class="post-type">Menu Items</option>        
<option value="wps_employees" class="post-type">Employees</option>
<option value="custom">Custom Link</option>

这是一个jsfiddle：http://jsfiddle.net/JrPeR/

Answer 3

我的可理解的jquery脚本

jQuery(document).ready(function($) {
    $(".link-pages").hide();
    $(".link-posts").hide();
    $(".link-custom").hide();
    $(".link-posttypes select").change(function(){
       var selectedVal = $(":selected",this).val();
       if(selectedVal=="post"){
            $(".link-pages").hide();
            $(".link-posts").show();
            $(".link-custom").hide();
       }else if(selectedVal=="page"){
            $(".link-pages").show();
            $(".link-posts").hide();
            $(".link-custom").hide();
       }else if(selectedVal!=""){
            $(".link-pages").hide();
            $(".link-posts").hide();
            $(".link-custom").show();
       }else{
            $(".link-pages").hide();
            $(".link-posts").hide();
            $(".link-custom").hide();
       }
    });
});

演示here。花几分钟时间让您轻松理解。玩得开心。

Answer 4

http://jsfiddle.net/JrPeR/3/

添加了一个条件，如果它不是两个变量，则默认为自定义。

jQuery：根据Dropdown中的选定选项显示/隐藏元素

4 个答案: