Question

我创建了2个轮播。两者都是使用相同的.css和.js文件克隆的，但问题是拳头转盘的next和prev按钮正常工作，而第二个转盘的next和prev按钮却不工作。为什么会这样。请您解决一下。我还尝试通过重命名第二个轮播的类和ID，并为其创建另一个CSS文件和JS。但这又不起作用。请说你能做什么。这是html文件

    public class CustomTokenRequestValidator : ICustomTokenRequestValidator
    {
        private readonly UserManager<ApplicationUser> _userManager;
        private readonly IHttpContextAccessor _httpContextAccessor;
        private const string errorMessage = "invalid_username_or_password";
        public CustomTokenRequestValidator(
              UserManager<ApplicationUser> userManager
            , IHttpContextAccessor httpContextAccessor)
        {
            _userManager = userManager;
            _httpContextAccessor = httpContextAccessor;
        }
        public async Task ValidateAsync(CustomTokenRequestValidationContext context)
        {
            _httpContextAccessor.HttpContext.Request.Form.TryGetValue("username", out var userOut);
            var u = userOut.ToString();

            if(u != null)
            {
                var user = await _userManager.FindByEmailAsync(u);
                if(user == null || !user.Active)
                {
                    context.Result.IsError = true;
                    context.Result.Error = errorMessage;
                }
            } else
            {
                context.Result.IsError = true;
                context.Result.Error = errorMessage;
            }
            return;
        }
    }

CSS

<div id="wrapper">
    <div id="carousel">
        <div id="content">
            <a href=""> <img class="item" src="images/b1.jpg" /></a>
            <a href=""> <img class="item" src="images/images (2).jpeg" /></a>
        </div>
    </div>
    <button id="prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z" />
        </svg>
    </button>
    <button id="next">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
        </svg>
    </button>
</div>

<div id="wrapper">
    <div id="carousel">
        <div id="content">
            <a href=""> <img class="item" src="images/b1.jpg" /></a>
            <a href=""> <img class="item" src="images/images (2).jpeg" /></a>
        </div>
    </div>
    <button id="prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z" />
        </svg>
    </button>
    <button id="next">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
        </svg>
    </button>
</div>

JavaScript

#wrapper {
  width: 100%;
  max-width: 964px;
  position: relative;
}

#carousel {
  overflow: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

#carousel::-webkit-scrollbar {
  height: 0;
}

#prev,
#next {
  display: flex;
  justify-content: center;
  align-content: center;
  background: white;
  border: none;
  padding: 8px;
  border-radius: 50%;
  outline: 0;
  cursor: pointer;
  position: absolute;
}

#prev {
  top: 50%;
  left: 0;
  transform: translate(50%, -50%);
  display: none;
}

#next {
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
}

#content {
  display: grid;
  grid-gap: 16px;
  grid-auto-flow: column;
  margin: auto;
  box-sizing: border-box;
}

.item {
  width: 200px;
  height: 250px;
  background: green;
}

第一个轮播是完美的，但是下一个秒和上一个按钮不起作用。即使一切都一样。

Answer 1

如评论中所述，页面上的所有ID必须是唯一的，否则总是第一个作为目标。要使其与多个按钮一起使用，您必须设置一个更加灵活的系统。

您的上一个和下一个按钮包装在包装器 div中，该div中还包含轮播和内容，因此您根本不需要任何ID。如果您知道单击了什么按钮，则可以使用javascript的DOM函数来定位它们。为此，这里有方便的event.target。

使用类为div设置样式（请注意，所有id都消失了）：

<div class="wrapper">
   <div class="carousel">
      <div class="content">
      ....
      </div>
   </div>
   <button class="prev">...</button>
   <button class="next">...</button>
</div>

要将事件监听器绑定到两个（或更多！） next 按钮，然后使用queryselector查找名为next的类的所有元素。您可以使用它将事件监听器绑定到所有next按钮：

var all_next = document.querySelectorAll(".next");
all_next.forEach( function(el){
    el.addEventListener( "click", function(event){
       //get the clicked button
       var clicked_element = e.target;
       // do something here
       .... 
    }
 })

现在从var clicked_element = e.target;行中，您确切地知道单击了哪个按钮，并计算出与此连接的包装器，转盘和容器是什么：

//get the wrapper (is the parent of NEXT)
  var wrapper = clicked_element.parentNode;
//get the carousel (is first child of wrapper)
  var carousel = wrapper.children[0];
//get the content (is first child of carousel)
  var content = carousel.children[0];

现在，您可以对所需的元素进行魔术处理了。

对prev按钮重复此操作。

乍看起来似乎需要更多的工作，但是您会更加灵活。如果尚未使用该ID，则可以添加其他包装，而不必进行计算。

注意。此答案中可能有错字。

轮播的下一个和上一个按钮中的错误

1 个答案: