基于匹配JSON数据实现Div显示/隐藏的技术实现问询

Got it, let's work through this together. You already have a function that pulls JSON data and matches brand_id to modelId for populating dropdown options—extending this to show/hide divs based on the matched data is straightforward. Here are two common implementation approaches depending on your needs:

1. Show/Hide Divs Based on Matched brand_id #

This scenario assumes you have divs tied directly to each brand_id, and you want to show the div corresponding to the passed modelId while hiding others.

Step 1: Prepare Your HTML

First, set up your divs with a shared class and a data-brand-id attribute to link them to the JSON data:

<!-- Target divs to control -->
<div class="brand-content" data-brand-id="1">Brand 1 Exclusive Content</div>
<div class="brand-content" data-brand-id="2">Brand 2 Exclusive Content</div>
<div class="brand-content" data-brand-id="3">Brand 3 Exclusive Content</div>

<!-- Optional: Fallback for no matching data -->
<div id="no-match-content" style="display: none;">No content available for this brand</div>

Step 2: Modify Your Existing Function

Update your loadModel function to handle div visibility after matching the data:

function loadModel(modelId) {
    $.ajax({
        type: "POST",
        dataType: 'json',
        url: '/api/model.json',
        success: function (data) {
            // Reset state first: hide all content divs and clear dropdown options
            $('.brand-content').hide();
            $('#item-brand-list').empty();
            $('#no-match-content').hide();

            let hasMatch = false;

            $.each(data, function (i, v) {
                if (v.brand_id == modelId) {
                    hasMatch = true;
                    // Keep your original dropdown population logic
                    $('#item-brand-list').append(`<option data-brand-id="${modelId}" value="${v.id}">${v.name}</option>`);
                    // Show the corresponding brand div
                    $(`.brand-content[data-brand-id="${modelId}"]`).show();
                }
            });

            // Show fallback if no matches were found
            if (!hasMatch) {
                $('#no-match-content').show();
            }
        },
        // Add error handling for failed requests
        error: function() {
            alert('Failed to load brand data. Please try again later.');
        }
    });
}

2. Show/Hide Divs Based on a Specific JSON Field #

If your JSON includes a flag (like is_visible) to control whether a specific model's div should be shown, use this approach instead.

Example JSON Structure

[
    {"id": 101, "brand_id": 1, "name": "Model X", "is_visible": true},
    {"id": 102, "brand_id": 1, "name": "Model Y", "is_visible": false},
    {"id": 201, "brand_id": 2, "name": "Model Z", "is_visible": true}
]

Step 1: Prepare HTML

Link divs to individual model IDs instead of brand IDs:

<div class="model-content" data-model-id="101">Model X Details</div>
<div class="model-content" data-model-id="102">Model Y Details</div>
<div class="model-content" data-model-id="201">Model Z Details</div>

Step 2: Update the Function

Adjust the logic to check the is_visible field from the JSON:

function loadModel(modelId) {
    $.ajax({
        type: "POST",
        dataType: 'json',
        url: '/api/model.json',
        success: function (data) {
            $('.model-content').hide();
            $('#item-brand-list').empty();

            $.each(data, function (i, v) {
                if (v.brand_id == modelId) {
                    $('#item-brand-list').append(`<option data-brand-id="${modelId}" value="${v.id}">${v.name}</option>`);
                    // Show/hide based on the JSON's is_visible flag
                    const targetDiv = $(`.model-content[data-model-id="${v.id}"]`);
                    v.is_visible ? targetDiv.show() : targetDiv.hide();
                }
            });
        },
        error: function() {
            alert('Failed to load model data.');
        }
    });
}

Quick Notes #

• Use empty() on the dropdown before appending new options to avoid duplicate entries.
• Always add error handling for AJAX requests to improve user experience.
• For cleaner code, use template literals (`string`) instead of concatenating strings—it's easier to read and maintain.

内容的提问来源于stack exchange，提问作者Jack The Baker