使用jQuery在Tab內單擊按鈕時獲取textarea值

Question

我正在嘗試使文本顯示在UI選項卡小部件中選項卡內的textarea中。 因此，我有一個按鈕詢問您的感覺。 如果在第二個選項卡中未選擇任何內容，則它將在文本區域中顯示一條消息。 現在，我單擊按鈕，即使使用.html或.text或.val方法，也不會顯示任何文本。 任何想法？

 $(function() { $( ".draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { if (ui.draggable.attr("id") == "gplan") { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Great Plan Picked!" ); } if (ui.draggable.attr("id") == "pplan") { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Poor Plan Picked!" ); } } }); //end of droppable });//end of $(function(){ $("#feelings").click(function(){ var gPlan = $("#gplan").val(); var pPlan = $("#pplan").val(); if(!gPlan && !pPlan) { $("textarea").val("I don't know"); } window.onload = function (){ $("#feelings").click(function(){ var gPlan = $("#gplan").val() var pPlan = $("#pplan").val() if(!gPlan && !pPlan) { $("textarea").html("I don't know").effect("bounce", 1000); } if(pPlan) { $(this).html("I feel great!"); } if(gPlan) { $(this).html("My Head Hurts!"); } }); // end of feelings click }); // end of feelings click 

 <div id="tabs-1"> <h2>Sign Up</h2> <form id="myform"> <br> <label for="first_name">First Name:</label><br> <input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span> <br> <br> <label for="last_name">Last Name:</label><br> <input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span> <br> <br> <label for="last_name">Start Date:</label><br> <input type="text" id="datepicker" name="datepicker" required> <span class="error" id="date_error"></span> <br> <br> <span class="error" id="all_error"></span> <p><input type="button" id="button" value="Creat an Account"></p> <p id="message"> </p> </div> <div id="tabs-2"> <div id="gplan" class="ui-widget-content, draggable"> <p>Great Plan!</p> </div> <br> <br> <div id="pplan" class="ui-widget-content, draggable"> <p>Poor Plan!</p> </div> <div id="droppable" class="ui-widget-header"> <p>Drop Your Plan Here</p> </div> </div> <div id="tabs-3"> <div id="effect" class="ui-widget-content ui-corner-all"> <p><input type="button" id="feelings" value="Show My Feelings"></p> <h2><textarea id="howdoyoufeel" name="feelings" rows="4" cols="30">How Do You Feel Now? </textarea></h2> </div> </div> </div> 

Answer 1

如果您想要的行為是在用戶單擊按鈕時顯示文本，則應將點擊偵聽器中的ID更改為'#button' 。 在您的代碼中，您正在偵聽文本區域中的click事件。

$("#button").click(function(){

應該解決您遇到的問題。

編輯：這是一個說明這個的小提琴： https ： //jsfiddle.net/pn06coky/

Answer 2

參見下面的示例，您可以通過一種非常簡單的方式來獲取可拖動和可拖放的標題，可以根據需要使用這些值將其存儲在隱藏字段中。 希望對您有幫助。

 $(document).ready(function() { $(".idows-file").draggable({ helper: "clone", revert: "invalid" }); $(".idows-folder").droppable({ accept: ".idows-file", drop: function(event, ui) { let draggableItem = $(ui.draggable[0]); let droppableName = $(this)[0].title; let draggableName = $(draggableItem).attr('title'); console.log(droppableName, draggableName); } }); }) 

 .idows-file { width: 64px; height: 64px; font-size: 64px; } .idows-folder { width: 64px; height: 64px; font-size: 64px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <div class="idows-file" title="My-File-name"> <i class="fa fa-file"></i> </div> <hr /> <div class="idows-folder" title="My-Folder-name"> <i class="fa fa-folder"></i> </div>