Question

我试图管理按钮上的触发事件，但我无法获得准确的结果。默认情况下，显示div id="mailArea"，但是当我点击网页按钮时，我希望隐藏此div，反之亦然。有谁可以帮助我吗？提前谢谢！

＆＃13;

#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;
}

＆＃13;

<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">

＆＃13;

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

＆＃13;

<properties>
    <ics.version>18.1.3</ics.version>
    <temp.dir>./temp/</temp.dir>
    <ftp.dir>scp://username:password@10.30.32.158</ftp.dir>
    <ics.dir>/u01/app/oracle/lib</ics.dir>
</properties>

    <build>
    <finalName>MyProject</finalName>
    <plugins>

        <!-- DOWNLOAD THE JAR FILES TO A TEMP FOLDER ON THE LOCAL MACHINE -->
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>wagon-maven-plugin</artifactId>
            <version>1.0</version>

            <executions>
                <execution>
                    <id>download-ftp-suite</id>
                    <configuration>
                        <url>${ftp.dir}:${ics.dir}</url>
                        <toDir>${temp.dir}</toDir>
                        <includes>
                            */**/*.jar
                        </includes>
                    </configuration>
                    <goals>
                        <goal>download</goal>
                    </goals>
                </execution>
              </executions>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-install-plugin</artifactId>
            <version>2.5.2</version>
            <executions>

                <execution>
                    <id>install-one-of-the-downloaded-jars</id>
                    <phase>site</phase>
                    <configuration>
                        <file>${temp.dir}one-of-the-downloaded-jars.jar</file>
                        <groupId>com.oracle.ics</groupId>
                        <artifactId>one-of-the-downloaded-jars</artifactId>
                        <version>${ics.version}</version>
                        <packaging>jar</packaging>
                        <generatePom>true</generatePom>
                    </configuration>
                    <goals>
                        <goal>install-file</goal>
                    </goals>
                </execution>
               </executions>
        </plugin>
     </plugins>


    <extensions>
        <!-- Enabling the use of SSH IN ACCESSING FTP/SCP -->
        <extension>
            <groupId>org.apache.maven.wagon</groupId>
            <artifactId>wagon-ssh</artifactId>
            <version>3.0.0</version>
        </extension>
    </extensions>
</build>

＆＃13;

$(document).ready(function() {
    $("input[name$='cars']").click(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#Cars" + test).show();
    });
});

＆＃13;

Answer 3

您可以在$('#mailArea').hide()

的onchange属性上添加input[type=radio]

＆＃13;

<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>

＆＃13;

Answer 4

跟踪按钮onclick事件。从那里，检查当前是否显示div。如果是，则隐藏它。如果隐藏，则显示它。

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

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

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

});

触发事件时隐藏/显示元素

4 个答案: