Question

我在href中有两个值，我想逐个使用这两个值。能够有人帮我怎么做？下面我把我尝试的代码。它正在迈出第一步。这意味着当我第一次单击时设置该值，但是当我第二次单击相同元素时未设置该值。

$(document).ready(function() {
  $('.parent a').click(function() {
    var link = $(this).attr('href');
    var sliptLink = link.split(',');
    var firstLink = sliptLink[0];
    var secondLink = sliptLink[1];
    /* this code execute when parent has class first  */
    if ($(this).parent().hasClass('first')) {
      $(this).attr('href', sliptLink[0]);
      $(this).parent().removeClass('first');
    } else {
      $(this).attr('href', sliptLink[1]);
      console.log(sliptLink[1]);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
  <a href="#123,#321">Link 1</a>
  <a href="#456,#654">Link 3</a>
  <a href="#789,#987">Link 2</a>
</div>

Answer 1

您正在做的是首先点击替换href，因此删除第二个条目 - 考虑使用其他属性，例如data-href

$(document).ready(function() {
  $('.parent a').click(function() {
    var link = $(this).attr('data-href');
    var sliptLink = link.split(',');
    var firstLink = sliptLink[0];
    var secondLink = sliptLink[1];
    /* this code execute when parent has class first  */
    if ($(this).parent().hasClass('first')) {
      $(this).attr('href', sliptLink[0]);
      $(this).parent().removeClass('first');
    } else {
      $(this).attr('href', sliptLink[1]);
      console.log(sliptLink[1]);
    }
  });
});

/* added for display */
a {
  cursor: pointer;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
  <a data-href="#123,#321">Link 1</a>
  <a data-href="#456,#654">Link 3</a>
  <a data-href="#789,#987">Link 2</a>
</div>

Answer 2

将您的链接更改为<a href="#" data-href="#789,#987">Link 2</a>，然后使用$(this).attr('data-href')。

问题在于，当您更新.attr('href', sliptLink[0])时，它会从原始#123中移除第二个href

<强>演示

$(document).ready(function() {
  $('.parent a').click(function(e) {
    e.preventDefault()
    var link = $(this).attr('data-href');
    var sliptLink = link.split(',');
    var firstLink = sliptLink[0];
    var secondLink = sliptLink[1];
    /* this code execute when parent has class first  */
    if ($(this).parent().hasClass('first')) {
      $(this).attr('href', sliptLink[0]);
      $(this).parent().removeClass('first');
    } else {
      $(this).attr('href', sliptLink[1]);
      console.log(sliptLink[1]);
    }
  });
});

<div class="parent first">
  <a href="#" data-href="#123,#321">Link 1</a>
  <a href="#" data-href="#456,#654">Link 3</a>
  <a href="#" data-href="#789,#987">Link 2</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 3

选中此项，因为第二次，您的href只有一个值，也没有逗号

$(document).ready(function() {
  $('.parent a').click(function() {
    var link = $(this).attr('href');
    /* this code execute when parent has class first  */
    if ($(this).parent().hasClass('first')) {
      var sliptLink = link.split(',');
      var firstLink = sliptLink[0];
      $(this).attr('href', sliptLink[0]);
      $(this).parent().removeClass('first');
    } else {
      $(this).attr('href', link);
      console.log(link);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
  <a href="#123,#321">Link 1</a>
  <a href="#456,#654">Link 3</a>
  <a href="#789,#987">Link 2</a>
</div>

Answer 4

首次点击只需将href设置为sliptLink[0] 。

这样第二次点击就不会知道sliptLink[1]是什么。

这可以使用分离的数据属性（例如：data-link）来完成。

$(document).ready(function() {
  $('.parent a').click(function() {
    var link = $(this).attr('data-link');
    var sliptLink = link.split(',');
    var firstLink = sliptLink[0];
    var secondLink = sliptLink[1];
    /* this code execute when parent has class first  */
    if ($(this).parent().hasClass('first')) {
      $(this).attr('href', sliptLink[0]);
      $(this).parent().removeClass('first');
    } else {
      $(this).attr('href', sliptLink[1]);
      console.log(sliptLink[1]);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
  <a href="#123,#321" data-link="#123,#321">Link 1</a>
  <a href="#456,#654" data-link="#456,#654">Link 3</a>
  <a href="#789,#987" data-link="#789,#987">Link 2</a>
</div>

Answer 5

@model AdminPanel.Models.cUser

@{

    Layout = null;
    ViewBag.Title = "Login";
}

<head>
    <link href="~/Content/Login.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <!-- Div containing the log in box parent -->
    <div class="log-in-box-parent">
        <h2>LOG IN</h2>

        <div class="log-in-form">

            @using (Html.BeginForm("Login", "Login", FormMethod.Post))
            {
                @Html.TextBoxFor(model => model.Username, new { placeholder = "Username" })
                @Html.TextBoxFor(model => model.Password, new { placeholder = "Password" })
                <input type="submit" id="login" value="Log in"/>
            }
        </div>
    </div>
</body>

Answer 6

使用Vanilla JS

    Array.from(document.querySelectorAll('.parent a')).forEach((e) => {
        e.addEventListener('click', () => {
            var links = e.hash.split(',');
            console.log(links);
        })
    });

我在href中有两个值，我想逐个使用这两个值

6 个答案: