Javascript 更新另一个DOM元素的数据时，jQuery数据值是否被覆盖？

我想我对jQuery数据对象有一个非常严重的误解。当我尝试获取并设置DOM元素的数据值（数据路由）时，具有相同数据路由但值不同的其他DOM元素也会被覆盖

为了解释这一点，我必须告诉你很多：

我有一个侧边栏，可以在其中向页面添加链接元素。方法是：

• 通过单击绿色的“添加链接”按钮添加元素。使用jQuery的append函数将新元素添加到菜单中。（还有另一个函数可以将新链接发送到数据库，但如果不是这个问题的话，这里也有一个函数。）
• 您可以添加无限量的链接，每个链接有4个设置：图标、颜色、背景色和当然链接url。HTML中只有4个输入字段，因此当您单击不同的链接项并使用加号打开它时，我通过搜索一个巨大的多维数组来更改输入字段中的数据

为了获得正确的值，我将数组的路由存储到相应元素的数据路由中。添加新链接时，包含数据的数组将更新，因此数据路由也必须更新

这就是它似乎出错的地方。 我以为每个元素都有自己的数据元素，但当我更新4个元素中的第1个元素时，其他3个元素的数据似乎也发生了变化

问题: 我循环遍历某个类的所有元素，这里是link-0； 使用名为“changeDataSub”的函数，我循环遍历所有目标元素，并更新这些元素的数据路由。 当我对元素1这样做时，一切都很顺利。我将路由从['link-0'，'empty']更改为['link-1'，'0']

然后，当我检索元素2的数据路由时，检索到的数据不是['link-0'，'empty']，而是['link-0']？？ 当我更新元素1时，为什么元素2到4的数据值也会改变

我这里有一个“工作”的例子： 当您添加一个元素并单击加号时，您可以看到第二个循环中记录的“newRoute”值与第一个循环中的值不同。这应该保持不变

Javascript 步骤1：创建新的链接元素

$('#settings-accordeon').on('click', '#create-sublink', function(){
    var button = $(this);
    var group = button.closest('.panel-collapse');
    var groupRoute = group.data('route');
    var ul = button.siblings('.link_count');
    var name = button.data('name');
    var count = ul.children().length;
    var groupName = group.attr('id');
    var routeSource = $('#settings-accordeon .' + ul.data('target')+'>input').first();
    $('#settings-accordeon .link-' + count).removeClass('link-' + count).addClass('link-'+(count+1));
    var route = groupRoute.concat(routeSource.data('route'));
    count++;
    ul.data('target','link-'+count);

    //Dynamic set new route of element
    var tmpArray = routeSource.data('route');
    var last = tmpArray.pop();
    tmpArray.pop();
    tmpArray = tmpArray.concat(['link-'+count]);
    tmpArray = tmpArray.concat(last);

    $('#settings-accordeon .' + ul.data('target')+' [data-route]').each(function(){
        $(this).data('route', tmpArray);
    })

    var html = '<li class="_select-link_count " data-index="'+count+'">Links '+count+'<i class="fa fa-plus _delete-link_count"></i></li>';
    ul.append(html);

    //Make first one .selected
    if(!ul.find('li.selected').length){
        ul.find('li:first').addClass('selected');
    }
})

处理更改的函数：（这就是它出错的地方）

函数changeDataSub（即，目标，索引，openSub）{
变量属性=$（'#数据'）。数据（'properties'）；
var groupRoute=that.closest（'.panel collapse'）。data（'route'）；
index=index.toString（）；
$（'#设置一致。'+目标）。每个（函数（）{
var值=属性；
var，该值=$（此值）；
var child=that.childs（'input'）；
var newRoute=child.data（'route'）；
newRoute.pop（）；
newRoute=newRoute.concat（索引）；
子数据（'route'，newRoute）；
var route=groupRoute.concat（newRoute.concat（child.data（'name'））；
//控制台日志（路由）；
对于（变量i=0；i

HTML 包含所需数据的HTML剪切：

 <div class="panel-group" id="settings-accordeon">
        <div aria-expanded="true" class="panel-collapse collapse in"
        data-route="[&quot;foreground&quot;]" id="text-foreground">
            <div class="panel-body">
                <p>Links</p>
                <ul class="link_count" data-name="link_count" data-target=
                "link-0"></ul><br>
                <div class="settings-group hidden link-0">
                    <p>Icoon</p><input class="form-control" data-name=
                    "link_icon_type" data-route=
                    "[&quot;link-0&quot;,&quot;empty&quot;]" data-sub-model=
                    "true" data-value="" type="text" value="tree"><br>
                </div>
                <div class="settings-group hidden link-0">
                    <p>Tekst kleur</p><input class=
                    "swatch_selector form-control input-sm"                         data-name="color" data-original-title="" data-rerender=
                    "color" data-route="[&quot;link-0&quot;,&quot;empty&quot;]"
                    data-swatch-type="SWATCH_TYPE_COLOR" data-value="#000000"
                    title="" type="text" value="zwart"><br>
                </div>
                <div class="settings-group hidden link-0">
                    <p>Kleur</p><input class=
                    "swatch_selector form-control input-sm" 
                     data-name='background_color'
                    data-name="background_color" data-original-title=""
                    data-rerender="background_color" data-route=
                    "[&quot;link-0&quot;,&quot;empty&quot;]" data-swatch-type=
                    "SWATCH_TYPE_BACKGROUND_COLOR" data-value="#ffffff" title=
                    "" type="text" value="wit"><br>
                </div>
                <div class="settings-group hidden link-0">
                    <p>Link</p><input class="form-control" data-name="link"
                    data-route="[&quot;link-0&quot;,&quot;empty&quot;]"
                    data-sub-model="true" data-value="" type="text" value=
                    ""><br>
                </div><a class="btn btn-success" data-name="link" data-route=
                "[]" id="create-sublink">Voeg link toe</a><br>
                <a class="btn btn-danger" data-name="link" data-route="[]" id=
                "destroy-sublink">Verwijder link</a><br>
            </div>
        </div>
    </div>
    <div data-properties=
    "{"foreground":{"color":"#000000","form_email_address":"","link_count":"1","button_0":"create-sublink","button_1":"destroy-sublink","column_title_toggle":false,"title":{"column_title_centre_toggle":true,"column_title_pattern_toggle":true},"link-1":{"empty":{"link_icon_type":"tree","color":"#000000","background_color":"#ffffff","link":""},"0":{"link_icon_type":"tree","color":"#000000","background_color":"#ffffff","link":""}}},"background":{"background_color":"#ffffff","background_pattern":"none","background_pattern_transparency":0,"background_overlay_toggle":false,"overlay":{"background_overlay_color":"#000000","background_overlay_transparency":0},"background_image_toggle":false,"image":{"background_parallax_toggle":false,"background_cover_toggle":true,"image_upload":"http:\/\/placehold.it\/150x150&amp;text=afbeelding"}}}"
    id="data"></div>

链接



Icon


Tekst kleur


克莱尔


链接


Voeg链接束头

Verwijder链接

您确定.children（'input'）与多个

元素不匹配吗？如果是，则

data（）

的setter形式将影响

child.data（'route'，newRoute）

中的所有设置。我已通过记录child.length值对其进行了测试，甚至调试了代码，其间包含警报消息。子变量中似乎始终只有一个元素。是否确定.children（'input'）与多个

元素不匹配？如果是，则

data（）

的setter形式将影响

child.data（'route'，newRoute）

中的所有设置。我已通过记录child.length值对其进行了测试，甚至调试了代码，其间包含警报消息。子变量中似乎始终只有一个元素

function changeDataSub(that, target, index, openSub){
    var properties = $('#data').data('properties');
    var groupRoute = that.closest('.panel-collapse').data('route');
    index = index.toString();

    $('#settings-accordeon .'+target).each(function(){
        var value = properties;
        var that = $(this);
        var child = that.children('input');
        var newRoute = child.data('route');
        newRoute.pop();
        newRoute = newRoute.concat(index);

        child.data('route', newRoute);
        var route = groupRoute.concat(newRoute).concat(child.data('name'));
        // console.log(route);

        for(var i= 0; i< route.length; i++) {
            value = value[route[i]];
        }
        //console.log(value);
        child.val(value);
        if(openSub){
            if(that.hasClass('hidden')){
                that.removeClass('hidden');
            } else {
                that.addClass('hidden');
            }
        }
    })
}

 <div class="panel-group" id="settings-accordeon">
        <div aria-expanded="true" class="panel-collapse collapse in"
        data-route="[&quot;foreground&quot;]" id="text-foreground">
            <div class="panel-body">
                <p>Links</p>
                <ul class="link_count" data-name="link_count" data-target=
                "link-0"></ul><br>
                <div class="settings-group hidden link-0">
                    <p>Icoon</p><input class="form-control" data-name=
                    "link_icon_type" data-route=
                    "[&quot;link-0&quot;,&quot;empty&quot;]" data-sub-model=
                    "true" data-value="" type="text" value="tree"><br>
                </div>
                <div class="settings-group hidden link-0">
                    <p>Tekst kleur</p><input class=
                    "swatch_selector form-control input-sm"                         data-name="color" data-original-title="" data-rerender=
                    "color" data-route="[&quot;link-0&quot;,&quot;empty&quot;]"
                    data-swatch-type="SWATCH_TYPE_COLOR" data-value="#000000"
                    title="" type="text" value="zwart"><br>
                </div>
                <div class="settings-group hidden link-0">
                    <p>Kleur</p><input class=
                    "swatch_selector form-control input-sm" 
                     data-name='background_color'
                    data-name="background_color" data-original-title=""
                    data-rerender="background_color" data-route=
                    "[&quot;link-0&quot;,&quot;empty&quot;]" data-swatch-type=
                    "SWATCH_TYPE_BACKGROUND_COLOR" data-value="#ffffff" title=
                    "" type="text" value="wit"><br>
                </div>
                <div class="settings-group hidden link-0">
                    <p>Link</p><input class="form-control" data-name="link"
                    data-route="[&quot;link-0&quot;,&quot;empty&quot;]"
                    data-sub-model="true" data-value="" type="text" value=
                    ""><br>
                </div><a class="btn btn-success" data-name="link" data-route=
                "[]" id="create-sublink">Voeg link toe</a><br>
                <a class="btn btn-danger" data-name="link" data-route="[]" id=
                "destroy-sublink">Verwijder link</a><br>
            </div>
        </div>
    </div>
    <div data-properties=
    "{"foreground":{"color":"#000000","form_email_address":"","link_count":"1","button_0":"create-sublink","button_1":"destroy-sublink","column_title_toggle":false,"title":{"column_title_centre_toggle":true,"column_title_pattern_toggle":true},"link-1":{"empty":{"link_icon_type":"tree","color":"#000000","background_color":"#ffffff","link":""},"0":{"link_icon_type":"tree","color":"#000000","background_color":"#ffffff","link":""}}},"background":{"background_color":"#ffffff","background_pattern":"none","background_pattern_transparency":0,"background_overlay_toggle":false,"overlay":{"background_overlay_color":"#000000","background_overlay_transparency":0},"background_image_toggle":false,"image":{"background_parallax_toggle":false,"background_cover_toggle":true,"image_upload":"http:\/\/placehold.it\/150x150&amp;text=afbeelding"}}}"
    id="data"></div>