使用jQuery点击Add按钮递增元素时，Div无法切换为display:block的问题

我帮你排查了代码里的问题，主要有几个小细节没处理好，导致点击Add按钮后news-pick-box的display属性没变化，咱们来一步步修正：

问题分析 #

1. 选择器错误：你写的$("selected-news")是在查找名为<selected-news>的HTML标签，但你的元素是类名为selected-news的div，必须加上类选择器的点号，改成$(".selected-news")才行。
2. 状态判断只执行一次：页面加载时你只判断了一次selected-news是否为空，点击按钮后没有重新触发这个判断逻辑，所以div的显示状态不会跟着更新。
3. 初始值处理问题：如果selected-news一开始是空的，第一次点击Add按钮时，+val会变成NaN，导致递增逻辑直接失效。

修正后的完整代码 #

var num = 0;

// 封装判断显示状态的函数，方便重复调用
function updateNewsBoxDisplay() {
  if ($('.selected-news').is(':empty') || $('.selected-news').text() === '0') {
    $('.news-pick-box').css("display", "none");
  } else {
    $('.news-pick-box').css("display", "block");
  }
}

// 页面加载时先执行一次判断，初始化显示状态
updateNewsBoxDisplay();

$('.addbutton').click(function() {
  // 修正选择器，同时处理初始为空的情况
  $('.selected-news').html(function(i, val) {
    // 如果val为空或者不是数字，默认用0来递增
    var currentVal = isNaN(parseInt(val)) ? 0 : parseInt(val);
    return currentVal + 1;
  });
  // 点击后立刻更新div的显示状态
  updateNewsBoxDisplay();
});

$('.subbutton').click(function() {
  $('.selected-news').html(function(i, val) {
    var currentVal = isNaN(parseInt(val)) ? 0 : parseInt(val);
    // 防止数值减到负数，保持最小值为0
    return Math.max(currentVal - 1, 0);
  });
  // 点击后更新div的显示状态
  updateNewsBoxDisplay();
});

关键改进点 #

• 把显示判断逻辑封装成updateNewsBoxDisplay函数，每次点击按钮后都调用，确保状态实时同步更新。
• 修正了类选择器的写法，保证能正确选中目标元素。
• 处理了初始值为空或非数字的情况，避免出现NaN异常，同时限制递减后的最小值为0，更符合常规业务逻辑。

内容的提问来源于stack exchange，提问作者Timilehin Osaze Adegbulugbe