Question

有一个带有一些span标签的段落，这些标签上带有id。在我的js上，我为每个标签都有一个侦听器，并且有一个对所有click事件调用的函数。我想使用if语句来过滤基于单击的标签的ID的操作，但我看不到要正确。

using Microsoft.AspNetCore.Http;
using System;
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http.Authentication;
using Microsoft.AspNetCore.Identity;

namespace OlegTarOpenId
{
    public class OpenIdMiddleware
    {
        private readonly RequestDelegate _next;

        public OpenIdMiddleware(RequestDelegate next)
        {
            _next = next;
        }

        public async Task InvokeAsync(HttpContext context)
        {
            var claims = new[]
            {
                new Claim("name", "Oleg")
            };
            var claimsIdentity = new ClaimsIdentity(claims, "Google");
            // Call the next delegate/middleware in the pipeline
            await context.SignInAsync("Google", new ClaimsPrincipal(claimsIdentity));//<-- There is the error
            await _next(context);
        }
    }
}

但是我还没有弄清楚如何将其缩小到特定标签。它会在单击时调用该函数，所以我认为监听器是正确的。我的问题是获取功能以显示单击的内容并对其做出反应。

ive tried if($("#id")){do something}
      if(this$("#id")){do something}

这是js代码

<p id="jobs" >
            <span id="1">Roofing</span><br>
            <span id="2">Siding</span><br>
            <span id="3">Gutters</span><br>

</p>

我想基于单击的跨度ID运行代码。请解释利弊您的答案，我将不胜感激。

Answer 1

我建议为每个选项添加一个唯一的类，而不是通过其id向每个元素添加点击事件。在下面的演示中，我将类.service添加到每个选项中。然后，可以使用此类使用jquery选择器将click事件一次性应用到每个实例。这样可以减少代码行数，这意味着您可以添加更多服务，而不必手动添加更多事件侦听器。

$(".service").click( function() {
  // do something
}

然后，演示将获得单击元素的唯一id，以便您可以在if / else if语句中对其进行检查，并根据单击的内容执行不同的活动。这样，您仍然可以拥有最初想要的功能。

让我知道您是否还需要其他东西。

// Add click event to all elements with the class
$(".service").click(function() {

  // Get the id of the clicked element
  var id = $(this).attr("id");
  
  // Print to console, just to prove we can tell the difference between the elements
  console.log("Clicked #" + id);

  // Check id against the various options to change outcome
  if (id == 1) {

    // Your 'Roofing' code here
    console.log("Roofing selected");

  } else if (id == 2) {

    // Your 'Siding' code here
    console.log("Siding selected");

  } else {

    // Your 'Gutters' code here
    console.log("Gutters selected");

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="1" class="service">Roofing</p>
<p id="2" class="service">Siding</p>
<p id="3" class="service">Gutters</p>

Answer 2

您非常接近，除了您不应该尝试在click函数中进行其他JQuery dom查找。您的问题是您不知道an additional event parameter can be passed to the callback。然后，使用该事件对象，您可以使用事件的目标（单击的div）并访问其ID。我现在只通知过它，但是您可以做任何您想做的事。

$(".clickable").click(myFunction);

function myFunction(theEvent) {
  alert(theEvent.target.id);
}

#root {
  height: 200px;
  background-color: black;
}

#one {
  width: 22px;
  height: 33px;
  background-color: red;
}

#two {
  width: 450px;
  height: 66px;
  background-color: blue;
}

.clickable:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="root">
  <div id="one" class="clickable">
  
  </div>
  <div id="two" class="clickable">
  
  </div>
  <div id="one" class="clickable">
  
  </div>
</div>

具有if语句的函数，该语句根据单击的元素id执行代码

2 个答案: