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

Question

这是我的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>

我尝试获取 2 个东西，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);
        }
    });

我尝试了不同的事件处理程序，它们都是 return 第一部分的 router_id 而不是我单击的那个的 ID。谁能告诉我如何获得正确的数据？

Answer 1

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

第二点：你有：

<div data-router-id="

一个“data-router-id”和两个：“router_id=""属性。

您可以使用 jQuery#closest and jQuery#data or jQuery#attr 访问它们。对于数据属性，您可以使用 data 但对于其他属性，您需要使用 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>

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

How to get the correct data value using jQuery

html

javascript

jquery

jquery-events