Question

我正在尝试将文本显示在UI标签小部件的选项卡内的textarea中。所以我有一个按钮询问你的感受。如果在第二个选项卡中未选择任何内容，则它应在文本区域中显示一条消息。现在我点击按钮，即使我使用.html或.text或.val方法也没有文字出现。有什么想法吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果您想要的行为是在用户点击按钮时显示文字，则应将点击监听器中的ID更改为'#button'。在您的代码中，您正在侦听textarea中的单击事件。

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

应该解决你遇到的问题。

编辑：这是一个说明这一点的小提琴：https://matplotlib.org/users/dflt_style_changes.html

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>

使用jQuery在Tab中单击按钮获取textarea值

2 个答案: