1

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

我的 div -

<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");
});

我将clickaddID 添加到所有 div 并将上一个脚本中的类从div.ab更改为div.clix. 它不工作。任何想法？

4

1 回答 1

0

更新

您可以只使用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);
    });
});

检查演示

于 2013-08-11T03:51:45.810 回答