イベントがトリガーされたときに要素を隠す/表示する

Question

ボタンのトリガーイベントを管理しようとしていますが、正確な結果を得ることができません。デフォルトでは、div id="mailArea"が表示されますが、Webボタンをクリックすると、このdivが非表示になり、逆も同様です。 誰かが私を助けることができますか？ ありがとうございます！ここで

#mailArea { 
 
    -moz-appearance: textfield-multiline; 
 
    -webkit-appearance: textarea; 
 
    height: 200px; 
 
    overflow: auto; 
 
    padding: 5px; 
 
    resize: both; 
 
    width: 500px; 
 
    font-size: 12px; 
 
    margin-top: 5px; 
 
} 
 

 
#mailwebArea { 
 
    -moz-appearance: textfield-multiline; 
 
    -webkit-appearance: textarea; 
 
    height: 200px; 
 
    overflow: auto; 
 
    padding: 5px; 
 
    resize: both; 
 
    width: 500px; 
 
    font-size: 12px; 
 
    margin-top: 5px; 
 
}

<div id="choiceMail"> 
 
    <input type= "radio" name="mail_type" value="text" onchange="$('#result').hide()" checked > Texte 
 
    <input type="radio" name="mail_type" value="web" onchange="$('#result').show()"> Web 
 
    <div> 
 
     <div id="mailArea"></div> 
 
    </div> 
 
</div> 
 
    <div id="result" style="display:none"> 
 
     <button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-weight: https://jsfiddle.net/t44aqpw0/3/#forkbold; font-size: 12px;' onclick='commande('bold');' title='Mettre votre en gras'>G</button> 
 
     <button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-style: italic; font-size: 12px;' onclick='commande('italic');' title='Mettre votre texte en italique'>I</button> 
 
     <button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-style: italic; font-size: 12px;' onclick='commande('underline');' title='Soulignez votre texte'>S</button>  <button class='btn btn-primary btn-md' onclick='taille('+', 'mailArea')' style='height: 25px; width: 30px; padding: 0' title='Augmenter la taille du texte'><span class='glyphicon glyphicon-plus'></span>    </button> 
 
     <button class='btn btn-primary btn-md' onclick='taille('-', 'mailArea')' style='height: 25px; width: 30px; padding: 0' title='Diminuer la taille du texte'><span class='glyphicon glyphicon-minus'></span>    </button> 
 
    <div id='mailwebArea' class='form-control animated' contenteditable='true'></div> 
 
    <div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Answer 1

は、ラジオボタンの選択に基づいて、あなたの 'mailArea' のdivのシンプルな表示/非表示です：

$('input[type=radio][name=mail_type]').on('change', function() { 
 
    if ($(this).val() == 'text') { 
 
    $('#mailArea').show(); 
 
    } else if ($(this).val() == 'web') { 
 
    $('#mailArea').hide(); 
 
    } 
 
});

#mailArea { 
 
    -moz-appearance: textfield-multiline; 
 
    -webkit-appearance: textarea; 
 
    height: 200px; 
 
    overflow: auto; 
 
    padding: 5px; 
 
    resize: both; 
 
    width: 500px; 
 
    font-size: 12px; 
 
    margin-top: 5px; 
 
} 
 

 
#mailwebArea { 
 
    -moz-appearance: textfield-multiline; 
 
    -webkit-appearance: textarea; 
 
    height: 200px; 
 
    overflow: auto; 
 
    padding: 5px; 
 
    resize: both; 
 
    width: 500px; 
 
    font-size: 12px; 
 
    margin-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="choiceMail"> 
 
    <input type="radio" name="mail_type" value="text" checked> Texte 
 
    <input type="radio" name="mail_type" value="web"> Web 
 
    <div> 
 
    <div id="mailArea">Mail area container</div> 
 
    </div> 
 
</div>

Answer 2

トラックボタンのonclickイベント。そこからdivが現在表示されていることを確認します。はいの場合は非表示にします。隠れている場合は、表示してください。

$('#yourButtonId').on('click', function(){ 

    var divElement = $('#yourDivId'); 
    var isVisible = divElement.is(':visible'); 

    if(isVisible == true){ 
    divElement.hide(); 
    } 
    else { 
    divElement.show(); 
    } 

}); 

Answer 3

$(document).ready(function() { 
 
    $("input[name$='cars']").click(function() { 
 
     var test = $(this).val(); 
 

 
     $("div.desc").hide(); 
 
     $("#Cars" + test).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myRadioGroup"> 
 
    
 
    Texte<input type="radio" name="cars" checked="checked" value="2" /> 
 
    
 
    Web<input type="radio" name="cars" value="3" /> 
 
    
 
    <div id="Cars2" class="desc"> 
 
     Display 
 
    </div> 
 
    
 
</div>

Answer 4

あなたはJを試してみました何input[type=radio]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="choiceMail"> 
 
    <input type= "radio" name="mail_type" value="text" onchange="$('#result').hide();$('#mailArea').show();" checked > Texte 
 
    <input type="radio" name="mail_type" value="web" onchange="$('#result').show();$('#mailArea').hide();"> Web 
 
    <div> 
 
     <div id="mailArea">mailArea</div> 
 
    </div> 
 
</div>