jQuery-顯示2選擇之間的關系

Question

我用PHP，MySQL，Bootstrap modal和Jquery創建了一個網站模塊。 我有4個帶有數據的復選框。 我將數據存儲在數據庫中。 如果客戶選擇2個復選框，則會出現一個引導模態，其中包含2個選擇之間的關系。 它實際上是可行的，但是模式會多次顯示數據。

在這種情況下，計算機1連接到計算機3，計算機3連接到計算機4。 因此，如果我選擇computer1和computer4，它將正確顯示關系，但是會多次顯示：

 $(document).ready(function() { $('#checkBtn').click(function getElementRelation(element1, element2) { var ele = document.getElementsByName("case"); var modal = document.getElementById("modaldata"); var hu = document.getElementsByName("hu"); var hu2 = document.getElementsByName("hu2"); if (modal.innerHTML === "") // if no relation is detected yet put start element { modal.innerHTML += element1; } //loop in data (this shows datas several times) for (var i = 0; i < ele.length; i++) { if (hu[i].innerHTML === element1) //if data = element 1 then put related element { modal.innerHTML += hu[i].innerHTML + "--->" + hu2[i].innerHTML + " "; if (hu2[i].innerHTML !== element2) //if related element != end element call function to get relation between related element and end element { getElementRelation(hu2[i].innerHTML, element2); } } } var start = ""; //hold start element var end = ""; //hold end element for (var i = 0; i < ele.length; i++) { if (ele[i].checked === true) { if (start === "") { start = hu[i].innerHTML; //set start element } else { end = hu[i].innerHTML; //set end element } } } checked = $("input[type=checkbox]:checked").length === 2; if (!checked) { alert("You must check 2 checkbox!"); return false; } else { getElementRelation(start, end); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Checkboxes --> <div class="container"> <div class="row"> <div class="col-sm-6"> <table class="table table-striped table-bordered"> <thead> <tr> <th></th> <th>Name</th> <th>Connect</th> </tr> </thead> <tbody> <tr> <!-- Checkboxes --> <td><input type="checkbox" name="case"></td> <td><p name="hu" value="Computer1">Computer1</p></td> <td><p name="hu2" value="Computer3">Computer3</p></td> </tr> <tr> <td><input type="checkbox" name="case"></td> <td><p name="hu" value="Computer2">Computer2</p></td> <td></td> </tr> <tr> <td><input type="checkbox" name="case"></td> <td><p name="hu" value="Computer3">Computer3</p></td> <td><p name="hu2" value="Computer4">Computer4</p></td> </tr> <tr> <td><input type="checkbox" name="case"></td> <td><p name="hu" value="Computer4">Computer4</p></td> <td></td> </tr> </tbody> </table> </div> </div> </div> <!-- Input button --> <div class="container"> <div class="row"> <div class="col-sm-12"> <input type="button" id="checkBtn" value="View" data-toggle="modal" data-target="#myModal" class="btn btn-info"> </div> </div> </div> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Title</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body" id="modaldata"> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

選擇Computer1和Computer3，並多次顯示數據

Answer 1

首先，段落標簽沒有任何屬性name或value 。 如果要創建新屬性，請使用HTML5數據屬性 。

為了使后續的JS代碼更容易，我們將這些屬性添加到input元素中。 例如，

<tr>
    <td><input type="checkbox" name="case" data-name="Computer1" data-connect="Computer3"></td>
    <td>Computer1</td>
    <td>Computer3</td>
</tr>

其次，您的JS代碼有點令人困惑。 我對為什么得到重復結果的猜測是因為您遞歸調用getElementRelation() 。

我將簡化您的代碼，如下所示

$(function() {
    // cache jQuery objects that we will be re-using
    var checkBoxes = $("input[name=case]");
    var myModal = $("#myModal");

    // get all relationships i.e. key = name, value = connect or null
    var relations = {};
    checkBoxes.each(function () {
        relations[this.dataset.name] = this.dataset.connect;
    });

    // when the getElementRelation() function is called normally, it is expected 
    // to have 2 arguments (element1 and element2); 
    // but as an event handler it will have 1 argument (Event object) 
    $('#checkBtn').click(function getElementRelation(e) {

        // get checked checkboxes
        var checkedBoxes = checkBoxes.filter(":checked");

        // validate first
        if (checkedBoxes.length != 2) {
            alert("You must check 2 checkbox!");
            return false;
        }

        // build modal body
        var html = '';

        var current = checkedBoxes[0].dataset.name,
            end = checkedBoxes[1].dataset.name;

        while (current) {
            html += current;

            // check if it is connected
            var next = relations[current];

            // if it is not connected, stop
            if (!next) {
                html = 'Not related';
                break;
            }

            // otherwise append HTML
            html += ' -> ' + next + '<br>';

            // if it is the end, stop
            if (next == end) break;

            // you may want to delete the key to avoid any infinite loop in case
            // delete relations[current];

            // start over using connected one
            current = next;
        }

        // update modal
        myModal.find('.modal-body').html(html);

        // open the modal dynamically once it is ready
        myModal.modal('show');
    });
});

最后一件事情，回到您的HTML中，在我們動態打開模式的同時 ，刪除data-toggle="modal"和data-target="#myModal" 。

演示版

 $(function() { // cache jQuery objects that we will be re-using var checkBoxes = $("input[name=case]"); var myModal = $("#myModal"); // get all relationships ie key = name, value = connect or null var relations = {}; checkBoxes.each(function() { relations[this.dataset.name] = this.dataset.connect; }); $('#checkBtn').click(function() { // get checked checkboxes var checkedBoxes = checkBoxes.filter(":checked"); // validate first if (checkedBoxes.length != 2) { alert("You must check 2 checkbox!"); return false; } // build modal body var html = ''; var current = checkedBoxes[0].dataset.name, // start with end = checkedBoxes[1].dataset.name; // end with while (current) { html += current; // check if it is connected var next = relations[current]; // if it is not connected, stop if (!next) { html = 'Not related'; break; } // otherwise append HTML html += ' -> ' + next + '<br>'; // if it is the end, stop if (next == end) break; // start over using connected one current = next; } // update modal myModal.find('.modal-body').html(html); // open the modal dynamically once it is ready myModal.modal('show'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Checkboxes --> <div class="container"> <div class="row"> <div class="col-sm-6"> <table class="table table-striped table-bordered"> <thead> <tr> <th></th> <th>Name</th> <th>Connect</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="case" data-name="Computer1" data-connect="Computer3"></td> <td>Computer1</td> <td>Computer3</td> </tr> <tr> <td><input type="checkbox" name="case" data-name="Computer2"></td> <td>Computer2</td> <td></td> </tr> <tr> <td><input type="checkbox" name="case" data-name="Computer3" data-connect="Computer4"></td> <td>Computer3</td> <td>Computer4</td> </tr> <tr> <td><input type="checkbox" name="case" data-name="Computer4"></td> <td>Computer4</td> <td></td> </tr> </tbody> </table> </div> </div> </div> <!-- Input button --> <div class="container"> <div class="row"> <div class="col-sm-12"> <input type="button" id="checkBtn" value="View" class="btn btn-info"> </div> </div> </div> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Title</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body" id="modaldata"> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">Close</button> </div> </div> </div> </div>