Question

我的功能有问题。我想要做的是动态添加和删除查询项。当我添加一个项目时，我将+1放入var InquiryItemCount，当我删除一个项目时，我从var InquiryItemCount中取出-1。正如您所看到的，当InquiryItemCount为＆gt;时，我正试图显示某个div。 0并在等于零时隐藏它。现在，div一直隐藏着。谢谢你的帮助。

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

var InquiryItemCount = 0;

$( "#new-inquiry-item" ).click(function() {
    event.preventDefault();
    $( ".inquiry" ).find('.inquiry-content').clone().find("input").val("").end().addClass('animated fadeInUp').appendTo( ".added-inquiry" );
    InquiryItemCount += 1;
});

$(".added-inquiry").on("click",".delete-inquiry", function(){
    $(this).parents(".inquiry-content").remove();
    InquiryItemCount -= 1;
});

if(InquiryItemCount > 0) {
    $('.create-inquiry-title').show();
}
else {
  $('.create-inquiry-title').hide();
}
});

Answer 1

你告诉它通过将脚本放在javascript中来运行，而不是从任何地方调用它。它不会在每个绑定事件之后运行，因为您没有将它包含在它们的函数中。

您希望每次对InquiryItemCount进行更改时都会运行它，因此write是一个函数并调用它。

$( "#new-inquiry-item" ).click(function() {
    event.preventDefault();
    $( ".inquiry" ).find('.inquiry-content').clone().find("input").val("").end().addClass('animated fadeInUp').appendTo( ".added-inquiry" );
    InquiryItemCount += 1;
    checkInquiryItemCount(InquiryItemCount);
});

$(".added-inquiry").on("click",".delete-inquiry", function(){
    $(this).parents(".inquiry-content").remove();
    InquiryItemCount -= 1;
    checkInquiryItemCount(InquiryItemCount);
});

// You should also hide the one you don't want to show on page load using CSS, 
// but you can run the function if you like.
// This can be before the function declaration (best to put functions last).
checkInquiryItemCount(0);

function checkInquiryItemCount(InquiryItemCount){
    // also, just use toggle() to show/hide as it accepts a boolean
    $('.create-inquiry-title').toggle(InquiryItemCount > 0);
}

Answer 2

现在if-else语句放在jQuery（document）.ready（）函数中。所以这意味着当文件准备好加载时会执行if-else。曾经只在这里。你应该做的是在函数中添加if-else，然后在你想检查显示或隐藏div时调用该函数。

这应该有所帮助：

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

var InquiryItemCount = 0;

$( "#new-inquiry-item" ).click(function() {
    event.preventDefault();
    $( ".inquiry" ).find('.inquiry-content').clone().find("input").val("").end().addClass('animated fadeInUp').appendTo( ".added-inquiry" );
    InquiryItemCount += 1;

    // Check Now
    checkShowForInquiry()
});

$(".added-inquiry").on("click",".delete-inquiry", function(){
    $(this).parents(".inquiry-content").remove();
    InquiryItemCount -= 1;

    // Check Now
    checkShowForInquiry()
});

});

function checkShowForInquiry(){
    if(InquiryItemCount > 0) {
        $('.create-inquiry-title').show();
    }
    else {
       $('.create-inquiry-title').hide();
    }
}

Answer 3

问题是你的if if只被执行了一次。您需要在每次添加/删除时触发逻辑。您需要将代码更新为以下

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

var InquiryItemCount = 0;

$( "#new-inquiry-item" ).click(function() {
    event.preventDefault();
    $( ".inquiry" ).find('.inquiry-content').clone().find("input").val("").end().addClass('animated fadeInUp').appendTo( ".added-inquiry" );
    InquiryItemCount += 1;
    updateTitle();  // triggering your logic
});

$(".added-inquiry").on("click",".delete-inquiry", function(){
    $(this).parents(".inquiry-content").remove();
    InquiryItemCount -= 1;
    updateTitle(); // triggering your logic
});

function updateTitle() {
    if(InquiryItemCount > 0) {
        $('.create-inquiry-title').show();
    }
    else {
       $('.create-inquiry-title').hide();
    }
}
updateTitle(); // calling function to trigger functionality on load
});

Answer 4

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

var InquiryItemCount = 0;

$( "#new-inquiry-item" ).click(function() {
    event.preventDefault();
    $( ".inquiry" ).find('.inquiry-content').clone().find("input").val("").end().addClass('animated fadeInUp').appendTo( ".added-inquiry" );
    InquiryItemCount += 1;

    showHide(InquiryItemCount);
});

$(".added-inquiry").on("click",".delete-inquiry", function(){
    $(this).parents(".inquiry-content").remove();
    InquiryItemCount -= 1;

    showHide(InquiryItemCount);
});


});

function showHide(InquiryItemCount){

    if(InquiryItemCount > 0) {
        $('.create-inquiry-title').show();
    }
    else {
      $('.create-inquiry-title').hide();
    }

}

为什么这个if / else语句没有重复运行？

4 个答案: