Question

我在追加懸停的div，因此它一直被添加。當光標懸停在元素上時，我該如何阻止添加並僅顯示/隱藏？

$('#submit-question-dropdown').hover(function() { 
    $('#submit-question-dropdown').append(`<div class="row" style='position:absolute;right:50px;background-color:red;z-index:5;padding:20px;top:70px;'><div id="addQuestion" style="float:left;" class="col-sm-6"><h3 style="margin-bottom:15px;">Submit question</h3><form onsubmit="createQuestion(quizType, $('#submitQ').val(), $('#submitA1').val(), $('#submitA2').val(), $('#submitA3').val(), $('#submitA4').val(), $('#submitCorrect').val(), $('#submitExpl').val(), $('#submitAuthor').val(), $('#submitDesc').val(), $('#submitDate').val());return false;"method="POST"><label style="margin-right:30px;" for="add-banking-question"><input class="form-control" id="add-banking-question" type="radio" name="add-q-quizType" value="BankingQuizQuestion" checked>Investment Banking</label><label for="add-trading-question"><input class="form-control" id="add-trading-question" type="radio" name="add-q-quizType" value="TradingQuizQuestion">Sales & Trading</label><input style="margin-top:10px;" class="form-control" type="text" id="submitQ" placeholder="Question" name="addq-q"><input class="form-control" type="text" id="submitA1" placeholder="Answer 1" name="addq-a1"><input class="form-control" type="text" id="submitA2" placeholder="Answer 2" name="addq-a2"><input class="form-control" type="text" id="submitA3" placeholder="Answer 3" name="addq-a3"><input class="form-control" type="text" id="submitA4" placeholder="Answer 4" name="addq-a4"><input class="form-control" type="text" id="submitCorrect" placeholder="Correct answer index" name="addq-correct"><input class="form-control" type="text" id="submitDesc" placeholder="Short description" name="addq-desc"><textarea class="form-control" type="text" id="submitExpl" placeholder="Explanation" name="addq-expl"></textarea><input class="form-control" type="text" id="submitAuthor" placeholder="Your name" name="addq-author"><input class="form-control" type="text" hidden id="submitDate" name="addq-date"><input class="btn btn-primary" type="submit" value="Send" style='width:100%;'><div hidden id="success-submit">Thanks! We will review your question in 48 hours.</div></form></div></div>`) 
}) 

Answer 1

你可以檢查div是否已經存在。基於此，您可以添加和刪除div。像這樣使用

$('#submit-question-dropdown').hover(function() { 

    if($('#submit-question-dropdown').find('.row').length == 0) 
    { 
     $('#submit-question-dropdown').append('<div class="row" style='position:absolute;right:50px;background-color:red;z-index:5;padding:20px;top:70px;'><div id="addQuestion" style="float:left;" class="col-sm-6"><h3 style="margin-bottom:15px;">Submit question</h3><form onsubmit="createQuestion(quizType, $('#submitQ').val(), $('#submitA1').val(), $('#submitA2').val(), $('#submitA3').val(), $('#submitA4').val(), $('#submitCorrect').val(), $('#submitExpl').val(), $('#submitAuthor').val(), $('#submitDesc').val(), $('#submitDate').val());return false;"method="POST"><label style="margin-right:30px;" for="add-banking-question"><input class="form-control" id="add-banking-question" type="radio" name="add-q-quizType" value="BankingQuizQuestion" checked>Investment Banking</label><label for="add-trading-question"><input class="form-control" id="add-trading-question" type="radio" name="add-q-quizType" value="TradingQuizQuestion">Sales & Trading</label><input style="margin-top:10px;" class="form-control" type="text" id="submitQ" placeholder="Question" name="addq-q"><input class="form-control" type="text" id="submitA1" placeholder="Answer 1" name="addq-a1"><input class="form-control" type="text" id="submitA2" placeholder="Answer 2" name="addq-a2"><input class="form-control" type="text" id="submitA3" placeholder="Answer 3" name="addq-a3"><input class="form-control" type="text" id="submitA4" placeholder="Answer 4" name="addq-a4"><input class="form-control" type="text" id="submitCorrect" placeholder="Correct answer index" name="addq-correct"><input class="form-control" type="text" id="submitDesc" placeholder="Short description" name="addq-desc"><textarea class="form-control" type="text" id="submitExpl" placeholder="Explanation" name="addq-expl"></textarea><input class="form-control" type="text" id="submitAuthor" placeholder="Your name" name="addq-author"><input class="form-control" type="text" hidden id="submitDate" name="addq-date"><input class="btn btn-primary" type="submit" value="Send" style='width:100%;'><div hidden id="success-submit">Thanks! We will review your question in 48 hours.</div></form></div></div>'); 
    } 
    else 
    { 
     $('#submit-question-dropdown').find('.row:first').remove(); 
    } 

}); 

Answer 2

試試這個：

$('#submit-question-dropdown').hover(function() { 

    if($('#submit-question-dropdown').find('.row').length == 0) 
    { 
     // No div is there, append it 
    } 
    else 
    { 
     // hide/show it 
    } 

}); 

Answer 3

這是怎麼做的，你想要什麼（你必須填寫的附加功能，它太長時間我不得不削減）：

var done = false; 
    $('#submit-question-dropdown').hover(function() { 
     if (done == false) 
     { 
      $('#submit-question-dropdown').append(); 
      done = true; 
     } 
     $(this).hide(); 
    }); 
    $("#submit-question-dropdown").mouseout(function() { 
     $(this).show(); 
    });