根据复选框显示在 jquery 中创建的隐藏 html

Question

我有一个页面，用户可以在其中选择一个复选框，基于我执行 ajax 调用并返回 'modules' 的复选框。这些是不同的数量，从 0 到 10 或更多。问题是模块出现在我网站的第二步中，在第一步（选中复选框）完成之前一直处于禁用状态。

我在第 2 步中有一段文字说 "Select a package in step 1 first before modules show up"。

我希望它的工作方式是：如果用户第一次进入该页面并选中一个复选框，则第二步中的文本淡出并且模块（通过 ajax 检索和在 jQuery 中创建的 html 检索）淡出慢慢地。在步骤 1 中更改另一个包后，我希望当前显示的模块淡出，新的模块再次淡入。

我知道我的代码哪里出错了（当我一直调用相同的 showModules(data) 函数时，但我不知道如何修复它。

我的 HTML 看起来像这样：

            <h3>Stap 1: Kies een lidmaatschap</h3>
            <div class="row">
                <?php
                $columnsize = floor((12 /  count($allpackages)));
                foreach ($allpackages as $package) {
                    echo "<div class='col-md-$columnsize'>";
                    echo "<h4>$package->name</h4>";
                    echo "<p>$package->short_description</p>";
                    echo "<p>De volgende modules zitten in het pakket:</p>";
                    echo "<p><ul>";
                    foreach ($package->modules as $module) {
                        echo "<li>$module->name</li>";
                    }
                    echo "</ul></p>";
                    echo "<p>Prijs: $package->price_eur €/jaar + $package->suborg_price_eur €/jaar per deelorganisatie</p>";
                    echo "<input type=\"radio\" name=\"package\" class=\"radiobtnpackage\" value='$package->package_id' required>";
                    echo "</div>";
                }
                ?>
            </div>
            <h3>Stap 2: Kies extra modules (optioneel)</h3>
            <div class="modulegrid">
                <p class="packagestep2fadeout">Selecteer eerst een pakket voor de overige beschikbare modules te bekijken.</p>
                <div class="moduleholder" style="display: none;">aaaaaaa</div>
            </div>

jQuery 看起来像这样：

var packageSelected = false;
    $('input[name=package]').change(function(ev){
        var ajaxPackageOptions = {
            type: 'POST',
            url: baseUrl + 'pricing/modules/getModuleById',
            dataType: 'json'
        };

        var packageData = {
            "packageid": $( 'input[name=package]:checked' ).val()
        };

        var optionsPackages = $.extend({}, ajaxPackageOptions, {
            data: packageData
        });

        ev.preventDefault();

        // ajax done & fail
        $.ajax(optionsPackages).done(function (data) {
            if (!$.isEmptyObject(data.result)) {
                //console.log(data.result);
                //console.log(packageSelected);
                showModules(data);
                if (packageSelected) {
                    $( ".moduleholder" ).fadeOut( 1000, function() {
                        showModules(data.result);
                        $( ".moduleholder" ).fadeIn( 2500, function() {

                        });
                    });
                } else {
                    //First time a package is selected we need to fade out the first text
                    $( ".packagestep2fadeout" ).fadeOut( 1000).promise().done(function() {
                        // Animation complete.
                        packageSelected = true;
                        showModules(data);
                        $( ".moduleholder" ).fadeIn( 2500, function() {

                        });
                    });
                }
            } else {
                //Geen modules beschikbaar tonen
            }
        }).fail(function (xhr, status, error) {
            //TODO: show error notification
            //alert('TODO: show error notification');
        });
    });

    function showModules(data) {
        //console.log(data);
        var container = $('<div class="modulename" />');
        $.each( data.result, function( key, value ) {
            container.append($("<h2>"+value['name']+"</h2>"));
        });
        $('.moduleholder').html(container);
    }

每次更改复选框时，先前模块中的文本会立即被新模块中的文本替换，然后淡出而不是再次出现。

编辑：创建了一个工作 fiddle!

Answer 1

它会立即更改，因为当您使用 showModules() 创建数据时，您的数据已经设置并且可见。使用 showModules() 创建数据后，您应该 .hide() 数据。然后它会 fadeIn() 很好，因为它 .hidden() 在你 fadeIn() 之前。看看下面的例子。

编辑： 好吧，所以我在错误的地方是对的，但是我在 .hide() 的位置上错了。在 else 语句中注释掉 $(".moduleholder").hide(); 会重现您所说的内容。我已将其移至 else 语句。我还删除了你的 $( ".packagestep2fadeout" ).fadeOut() 调用的 .promise()。

var packageSelected = false;
$('input[name=package]').change(function(ev) {

  ev.preventDefault();
  $.ajax({
    url: "https://api.github.com/users/justinjmnz",
  }).done(function(data) {
    var div = $(".moduleholder");
    if (packageSelected) {
      div.fadeOut(1000, function() {
        showModules(data);
        // div.hide(); // Hide the data so it fades in nice: EDIT: Don't really need it here
        div.fadeIn(2500);
      });
    } else {
      $(".packagestep2fadeout").fadeOut(1000, function() { // Removed .promise()
        packageSelected = true;
        showModules(data);
        $(".moduleholder").hide(); // It's supposed to be here
        $(".moduleholder").fadeIn(2500);
      });
    }
  });
});

function showModules(data) {
  var container = $('<div class="modulename" />');
  $.each(data, function(key, value) {
    // console.log(key, value);
    container.append($("<p>Key: " + key + "</br>Value: " + value + "</p>"));
  });
  // Surprise at the bottom!
  container.append($("<img src=" + data.avatar_url + "</img>"));
  $('.moduleholder').html(container);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="package">
<p class="packagestep2fadeout">Selecteer eerst een pakket voor de overige beschikbare modules te bekijken.</p>
<div class="moduleholder">
</div>

在您的示例中，它看起来像这样：

 $(".packagestep2fadeout").fadeOut(1000, function() { // Removed .promise()
    packageSelected = true;
    showModules(data);
    $(".moduleholder").hide(); // Added this guy
    $(".moduleholder").fadeIn(2500);
  });

Answer 2

这应该可以说明您正在尝试做什么。这都是关于 fadeIn 和 fadeOut 调用的位置。

var details = {
    1: [{name: 'Stuff'}, {name: 'More Stuff'}],
    2: [{name: 'Foo'}, {name: 'Bar'}],
    3: [{name: 'Cheese'}, {name: 'Whine'}],
    4: [{name: 'Ball'}, {name: 'Bat'}]
}

$('input[name=package]').change(function(e) {
  var $this = $(this);

  $('.moduleholder').fadeOut(1000); // make sure we "fadeout" on change
  
  // simulate ajax call
    setTimeout(function() {
      var data = {};
      data.result = details[$this.val()];
      showModules(data);
  }, 1000);
});

function showModules(data) {
    var container = $('<div class="modulename" />');
    $.each( data.result, function( key, value ) {
        container.append($("<h2>"+value['name']+"</h2>"));
    });
    $('.moduleholder').html(container);
    $('.moduleholder').fadeIn(1000); // <--- add this here
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="package1">Package 1</label>
<input type="radio" name="package" value="1" id="package1"/>
<label for="package2">Package 2</label>
<input type="radio" name="package" value="2" id="package2"/>
<label for="package3">Package 3</label>
<input type="radio" name="package" value="3" id="package3"/>
<label for="package4">Package 4</label>
<input type="radio" name="package" value="4" id="package4"/>

<div>
  <p>Details of selected package</p>
  <div class="moduleholder" style="display: none; border: 1px solid black;"></div>
</div>

Answer 3

只是你逻辑上的小问题，你需要做的就是取消注释下一行：

    // Animation complete.
    packageSelected = true;

    showModules(a); //<--THIS LINE
    $(".moduleholder").fadeIn(2500, function() {

    });

并改变

showModules(a);
if (packageSelected) {
  $(".moduleholder").fadeOut(1000, function() {
    //showModules(data.result);

    $(".moduleholder").fadeIn(2500, function() {

    });
  });
}

为了

if (packageSelected) {
  $(".moduleholder").fadeOut(1000, function() {
    //showModules(data.result);
    showModules(a);
    $(".moduleholder").fadeIn(2500, function() {

    });
  });
}

check it out

高

根据复选框显示在 jquery 中创建的隐藏 html

Show hide created html in jquery based on checkbox

html

javascript

jquery

fade