Question

This is my 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>

I'm try to get 2 things, the router_id for the section clicked and the value for the checkbox I clicked on. This is what I've tried thus far:

    $('.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);
        }
    });

I've tried different event handlers and they all return the router_id of the first section and never the id for the one I click. Can someone tell me how to get the correct data?

Answer 1

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

第二点：你有：

<div data-router-id="

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

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

How to get the correct data value using jQuery

1 个答案: