Question

我正在尝试通过点击我选择的div来填写表单。每个div都有不同的信息。

我的divs -

<div class="ab">
<ul>
    <li data-key="name">Sahar Raj</li>
    <li data-key="address">Address.</li>
    <li data-key="city">City</li>
    <li data-key="state">State</li>
    <li data-key="pin">Pin</li>
    <li data-key="phone">9876543210</li>
</ul>
</div>

<div class="ab">
<ul>
    <li data-key="name">Some Name2</li>
    <li data-key="address">Address2</li>
    <li data-key="city">City3</li>
    <li data-key="state">State4</li>
    <li data-key="pin">Pin5</li>
    <li data-key="phone">Phone2</li>
</ul>
</div>

<div class="ab">
<ul>
    <li data-key="name">Some Name3</li>
    <li data-key="address">Address3</li>
    <li data-key="city">City3</li>
    <li data-key="state">State3</li>
    <li data-key="pin">Pin3</li>
    <li data-key="phone">Phone3</li>
</ul>
</div>

表格 -

<div class="formcontainer">
<input class="required" type="text" name="name" />
<textarea name="address" class="required"></textarea>
<input class="required" type="text" name="city" />
<input class="required" type="text" name="state" />
<input class="required" type="text" name="pin" />
<input class="required" type="text" name="phone" />
</div>

脚本 -

$('div.ab').click(function () {
    $('.formcontainer').children().each(function() {
         // Get the corresponding key value from li.
         var $this =  $(this),
             key = $this.attr('name');
         // Find the li with that key
        var txt = $('.ab li[data-key="'+ key +'"]').text();

        $this.val(txt);
    });
});

最初我尝试过这么多。我有三个不同信息的div。但是这个表格充满了所有三个div的内容。然后我添加了这个脚本，以便在悬停时，它会将类clix添加到div -

$("#clikadd").hover(function() {
$(this).addClass("clix");
}, function() {
    $(this).removeClass("clix");
});

我向所有div添加了clickadd ID，并将之前脚本中的类从div.ab更改为div.clix。它不起作用。有什么想法吗？

Answer 1

<强>更新

您可以使用this上下文来了解点击了哪个div。您可以选择$('.ab')之类的常规选择器来选择所有div。

<强> JS

$('div.ab').click(function () {

    var $divClicked = $(this);
    $('.formcontainer').children().each(function () {
        // Get the corresponding key value from li.
        var $this = $(this),
            key = $this.attr('name');

        // Find the li with that key
        var txt = $divClicked.find('li[data-key="' + key + '"]').text();

        $this.val(txt);
    });
});

通过单击选项的div来填充输入

1 个答案:

的 Check Demo