如何实现点击.item后，仅显示.modal内有来源的.modal-item div？

我明白你的需求啦——点击某个.item元素后，只让.modal里那些成功从点击的.item拿到对应内容的.modal-item显示，没拿到内容的就保持隐藏。咱们来一步步修改现有代码实现这个效果：

核心思路 #

1. 先获取触发点击的目标.item元素
2. 对每个.modal-item，检查是否能从目标.item中获取到对应内容
3. 有内容的：设置内容并显示该.modal-item；无内容的：隐藏该元素

修改后的完整代码示例 #

$(".container").on("click", ".item", function() {
    // 获取点击的目标.item元素
    const targetItem = $(this).closest(".item");
    
    // 先默认隐藏所有.modal-item，避免历史状态干扰
    $(".modal .modal-item").hide();

    // 处理#item-text：检查是否有有效内容
    const itemTextContent = targetItem.find(".item-text").text().trim();
    if (itemTextContent) {
        $("#item-text").text(itemTextContent).show();
    }

    // 处理#item-sub-text：同理检查内容有效性
    const itemSubTextContent = targetItem.find(".item-sub-text").text().trim();
    if (itemSubTextContent) {
        $("#item-sub-text").text(itemSubTextContent).show();
    }

    // 处理#item-img：假设对应.item里的图片资源地址
    const itemImgSrc = targetItem.find(".item-img").attr("src");
    if (itemImgSrc) {
        $("#item-img").attr("src", itemImgSrc).show();
    }
});

代码细节说明 #

• 开头先统一隐藏所有.modal-item，确保每次点击都是全新的状态，不会残留上一次的显示结果
• 用trim()去除文本内容的首尾空白，避免空字符串或者纯空格被误判为“有内容”
• 每个.modal-item都单独做判断：只有从点击的.item里拿到有效内容时，才会赋值并显示该元素，否则保持隐藏

这样就能实现你要的效果啦——比如点击第一个.item时，只有能拿到对应内容的#item-img会显示，其他没获取到有效内容的#item-text和#item-sub-text就会保持隐藏~

内容的提问来源于stack exchange，提问作者Kyle Underhill