javascript - 如何仅在使用 jquery 扩展的文本区域上调用 ajax？

Question

扩展文本区域或在扩展文本区域时调用 ajax 都没有问题。但是，当我有三个文本区域时，每当我展开文本区域时，这三个文本区域都会调用 ajax。我想调用扩展的文本区域。我不知道这样做。我试过 $(this).closest('textarea').attr('id')，它不起作用。帮助，感谢。

$.fn.TextAreaExpander = function(minHeight, maxHeight) {

			var hCheck = !($.browser.msie || $.browser.opera);
		    var prevHeight;

			// resize a textarea
			function ResizeTextarea(e) {

				// event or initialize element?
				e = e.target || e;

				// find content length and box width
				var vlen = e.value.length, ewidth = e.offsetWidth;
				if (vlen != e.valLength || ewidth != e.boxWidth) {

					if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0";
					var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));

					e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
					e.style.height = h + "px";
					
					if(e.style.height > prevHeight)  // throw the alert only if the height is not same as the previous one
						load_expand_text();// the function that will be called when expand
					e.valLength = vlen;
					e.boxWidth = ewidth;
			        prevHeight = e.style.height;  // save the height
					
				}

				return true;
			};

			// initialize
			this.each(function() {

				// is a textarea?
				if (this.nodeName.toLowerCase() != "textarea") return;

				// set height restrictions
				var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
				this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
				this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);

				// initial resize
				ResizeTextarea(this);

				// zero vertical padding and add events
				if (!this.Initialized) {
					this.Initialized = true;
					$(this).css("padding-top", 0).css("padding-bottom", 0);
					$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
				}
				
			});

			return this;
		};



function load_expand_text(){
	var data={ 
            action: 'load_expand_text',
			current_load:'499',
		    userVoteNonce : UserAjaxVote.userVoteNonce,

};
		$.ajax({
			url: UserAjaxVote.ajaxurl,
			type:'POST',
			cache: false,
			data:data,
            beforeSend: function() {

  },
			success: function(data){
				$('.expand9-999').html(data);

			}
				});//ajax
				
			};//function load_expand_text

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea class="expand9-999" id="exer_t"></textarea>
<textarea class="expand9-999" id="diet_t"></textarea>
<textarea class="expand9-999" id="run_t"></textarea>

Answer 1

问题是您的 3 个 textarea 对象具有相同的类，当您使用类选择器时，您将 ajax 调用的结果放在所有文本区域中，使用以下行:

$('.expand9-999').html(data);

您可以将 textarea 的 id 传递给 load_expand_text 函数，然后为正确的 textarea 对象设置 html。

您也可以尝试使用 jQuery UI 的 resible 插件，并将您的代码放入函数中，如下所示:

$("textarea").resizable({
resize: function() {
    // your code and ajax call here, or something like this:
   load_expand_text($(this))
}});

还有 load_expand_text 函数:

function load_expand_text(objtextarea){
... ajax call
success: function(data){
        $(objtextarea).html(data);

        }

希望对您有所帮助。