更改文本区域字段、HTML、JS、jQuery

Changing the textarea field, HTML, JS, jQuery

本文关键字：HTML jQuery JS 字段 文本 区域      更新时间：2024-04-29

我有7个按钮（不同的合作伙伴按钮具有不同的图像（徽标））。

<a class="button button-type-1 fancybox_js" href="#buttonX">
<a class="button button-type-2 button-gray fancybox_js" href="#buttonX">
<a class="button button-type-2 button-orange fancybox_js" href="#buttonX">

正如你所看到的，它们都有不同的方式来打开带有文本区域的模式窗口

<div class="hidden" id="buttonX">
    <div class="login-form">
        <div class="login-form-inner">
            <textarea id="button1" name="something"></textarea>

该文本区域内必须是按下的该按钮的代码

<a class="button button-type-1 fancybox_js" href="#buttonX"> if pressed this button

但我需要根据点击的按钮来更改文本区域的值。如果我单击<a class="button button-type-2 button-orange fancybox_js" href="#buttonX">按钮，在模式窗口中，我需要有一个包含该按钮代码的文本区域。

我怎样才能做到这一点？

您可以使用jQuery的clone（）和html（）方法获得按钮的代码。

我已经为您的所有按钮添加了一个类（"myCBtn"），然后在<div>中克隆该按钮。之后，您只需要使用创建的DIV的HTML来获得按钮的代码。

按钮的HTML。

<td width="50%"><a class="button myCBtn button-type-1 button-blue-round fancybox_js" href="#buttonX"><span>Купить в кредит1</span></a><br>
<a class="button myCBtn button-type-1 fancybox_js" id="button_1" href="#buttonX"><span>Купить в кредит4</span></a><br>
<a class="button myCBtn button-type-2 button-gray fancybox_js" href="#buttonX"><span>Купить в кредит2</span></a><br>
<a class="button myCBtn button-type-2 button-orange fancybox_js" href="#buttonX"><span>Купить в кредит3</span></a><br></td>

更改以下代码

<div class="myCBtn" id="myCBtn">
    <textarea id="myCBtn" name="ButtonCode"></textarea>
</div>

至

<div class="popupDivClass" id="popupDivId">
    <textarea id="buttonCodeTA" name="ButtonCode"></textarea>
</div>

同时拆下下面的线路。

document.getElementById('myCBtn').value = buttoncode;

并将点击功能更新为：

$('.myCBtn').click(function(e){
            var thisbutton=$(this).clone();
        var newDiv=$('<div>').append(thisbutton);
        var buttoncode=$(newDiv).html();
        // perform next operations here using buttoncode.
        $("#buttonCodeTA").val(buttoncode);
    });

更新的jsFiddle：https://jsfiddle.net/7o6p8nso/1/

相关文章：