如何使用jQuery获取正确的数据值

How to get the correct data value using jQuery

本文关键字：数据 何使用 jQuery 获取      更新时间：2023-09-26

这是我的HTML：

<div id="RouterTemplates">
<div data-router-id="4" data-router-name="DF_DCM_ROUTER_1" class="jarviswidget jarviswidget-color-greenDark router-template" data-widget-colorbutton="false" data-widget-custombutton="false"    >
    <header>
        <span class="widget-icon">
            <i class="fa fa-table"></i>
        </span>
        <h2 >Router: AE Title: DF_DCM_ROUTER_1, Description: </h2>
        <div class="widget-toolbar" id="routeronoffswitchtoobar" router_id="4">
            <span class="onoffswitch">
                <input type="checkbox" name="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch" id="routeronoffswitch" router_id="4" checked="checked">
                    <label class="onoffswitch-label" for="routeronoffswitch">
                        <span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
                        <span class="onoffswitch-switch"></span>
                    </label>
            </span>
        </div>
    </header>
</div>
<div data-router-id="5" data-router-name="DISABLEDROUTER" class="jarviswidget jarviswidget-color-red router-template" data-widget-colorbutton="false" data-widget-custombutton="false"    >
    <header>
        <span class="widget-icon">
            <i class="fa fa-table"></i>
        </span>
        <h2 >Router: AE Title: DISABLEDROUTER, Description: Not in use</h2>
        <div class="widget-toolbar" id="routeronoffswitchtoobar" router_id="5">
            <span class="onoffswitch">
                <input type="checkbox" name="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch" id="routeronoffswitch" router_id="5" >
                    <label class="onoffswitch-label" for="routeronoffswitch">
                        <span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
                        <span class="onoffswitch-switch"></span>
                    </label>
            </span>
        </div>
    </header>
</div>
</div>

我试着得到两个东西，点击的部分的router_id和我点击的复选框的值

    $('.routerservicestatusswitch').on('click', function (e)
    {
        var id = $(this).parent('router-template').data('router-id');
        var id2 = $(this).siblings('.router-template').data('router-id');
        var id3 = $(this).closest('.router-template').data('router-id');
        var id4 = $(this).closest('.widget-toolbar').find('.onoffswitch-checkbox').data('router_id');
        var id5 = $(this).find(':checkbox').attr('router_id');
        var id6 = $(this).find(':checkbox').val();
        if ($('#routeronoffswitch').is(':checked') == true)
        {
            SetRouter(true);
        }
        else
        {
            SetRouter(false);
        }
    });

我尝试过不同的事件处理程序，它们都返回第一部分的router_id，而从不返回我单击的那个部分的id。有人能告诉我如何获得正确的数据吗？

您有重复的ID：这是不可能的。因此，您必须将它们更改为类或添加后缀，以使它们具有唯一性。

第二点：你有：

<div data-router-id="

一个">数据路由器id"和两个：">router_id=">"属性。

您可以使用jQuery#最近值和jQuery#数据或jQuery#属性来访问它们。对于数据属性，您可以使用数据，但对于其他属性，您需要使用attr：

此外，请尝试使用复选框的更改事件，而不是单击。

摘录：

function SetRouter(arg1) {
  console.log('SetRouter: ' + arg1)
}
$('.routerservicestatusswitch').on('change', function (e) {
  var id1 = $(this).closest('.router-template').data('router-id');
  var id2 = $(this).closest('.widget-toolbar').attr('router_id');
  var id3 = $(this).attr('router_id');
  var id4 = $(this).val();
  console.log('id1: ' + id1 + ' id2: ' + id2 + ' id3: ' + id3);
  if ($(this).is(':checked')) {
    SetRouter(true);
  } else {
    SetRouter(false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="RouterTemplates">
    <div data-router-id="4" data-router-name="DF_DCM_ROUTER_1" class="jarviswidget jarviswidget-color-greenDark router-template"
         data-widget-colorbutton="false" data-widget-custombutton="false">
        <header>
			<span class="widget-icon">
			<i class="fa fa-table"></i>
			</span>
            <h2 >Router: AE Title: DF_DCM_ROUTER_1, Description: </h2>
            <div class="widget-toolbar" id="routeronoffswitchtoobar1" router_id="4">
					<span class="onoffswitch">
						<input type="checkbox" id="routeronoffswitch1" class="onoffswitch-checkbox routerservicestatusswitch"
                               router_id="4" checked="checked">
						<label class="onoffswitch-label" for="routeronoffswitch1">
                            <span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
                            <span class="onoffswitch-switch"></span>
                        </label>
					</span>
            </div>
        </header>
    </div>
    <div data-router-id="5" data-router-name="DISABLEDROUTER" class="jarviswidget jarviswidget-color-red router-template" data-widget-colorbutton="false" data-widget-custombutton="false"    >
        <header>
			<span class="widget-icon">
			<i class="fa fa-table"></i>
			</span>
            <h2 >Router: AE Title: DISABLEDROUTER, Description: Not in use</h2>
            <div class="widget-toolbar" class="routeronoffswitchtoobar" router_id="5">
					<span class="onoffswitch">
						<input type="checkbox" id="routeronoffswitch" class="onoffswitch-checkbox routerservicestatusswitch"
                               router_id="5" >
						<label class="onoffswitch-label" for="routeronoffswitch">
                            <span class="onoffswitch-inner" data-swchon-text="ON" data-swchoff-text="OFF"></span>
                            <span class="onoffswitch-switch"></span>
                        </label>
					</span>
            </div>
        </header>
    </div>
</div>

相关文章：