Question

有人可以帮我解决这个问题。我需要在用户点击课程链接时显示隐藏在div中的课程描述，并在点击任何链接后切换

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CourseID)
        </td>
        <td>
            <a title="Click to See Course Description" class="info" id="@Html.DisplayFor(modelItem => item.Title)" href="#">@Html.DisplayFor(modelItem => item.Title)</a>
        </td>
}
<div class="myshow" id="Calculus_show" style="display:none">
    <p>
        Information about a Course
    </p>
</div>

我有我的js代码

$(document).ready(function () {
    $('.info').on('click',function (e) {
        e.preventDefault();
        id = '#' + $(this).attr('id');
        id = id + '_show';
        $('div.myshow').attr('id', id);
        $(id).toggle();
    })
});

此处div.myshow不会在切换时显示。

Answer 1

看起来像是＆＃34; $（＆＃39; div.myshow＆＃39;）＆＃34;你正在改变div的ID，以便在没有任何理由的情况下使用＃，这会导致脚本中断。我只是评论它，它给了我你想要的结果。还添加了一个隐藏到myshow div的内容，所以当选择一个课程，然后选择另一个课程时，它会隐藏前面的课程div并打开新的课程。我假设在制作HTML时，HTML中生成的所有内容都正确显示。

修改代码以显示它如何与多个链接一起使用。

＆＃13;

$(document).ready(function () {
  $('.info').on('click',function (e) {
    e.preventDefault();
    id = '#' + $(this).attr('id');
    id = id + '_show';
  
    //$('div.myshow').attr('id', id);
    $('.myshow').hide();
    $(id).toggle();
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      1234
    </td>
    <td>
      <a title="Click to See Course Description" class="info" id="Calculus" href="#">Calculus</a>
    </td>
  </tr>
  <tr>
    <td>
      1234
    </td>
    <td>
      <a title="Click to See Course Description" class="info" id="Programming" href="#">Programming</a>
    </td>
  </tr>
</table>
<div class="myshow" id="Calculus_show" style="display:none">
  <p>
    Information about Calculus
  </p>
</div>
<div class="myshow" id="Programming_show" style="display:none">
  <p>
    Information about Programming
  </p>
</div>

＆＃13;

Answer 2

您可以尝试这样的事情：

首先找到所有可见的div，隐藏它们。然后使用this，导航到必要的div并显示它。

$(".action").on("click", function(){
  var self = this;
  $(".info:visible").fadeOut(function(){
    $(self).parent().find(".info").fadeIn();
  });
});

.tile, .info{
  font-weight:bold;
  padding:5px;
  margin:5px;
  border:gray;
}

.info{
  color:#333;
  background:#ddd;
  display:none;
}

.visible{
  display:block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="tile">
  <a class="action" onclick="show(1)">Show 1</a>
  <div class="info visible">Information of 1</div>
</div>

<div class="tile">
  <a class="action" onclick="show(2)">Show 2</a>
  <div class="info">Information of 2</div>
</div>

<div class="tile">
  <a class="action" onclick="show(3)">Show 3</a>
  <div class="info">Information of 3</div>
</div>

<div class="tile">
  <a class="action" onclick="show(4)">Show 4</a>
  <div class="info">Information of 4</div>
</div>

Answer 3

$(document).ready(function () {
$('.info').on('click',function (e) {
    e.preventDefault();
    id = '#' + $(this).attr('id');
    id = id + '_show';
    $('div.myshow').attr('id', id);
    $(id).toggle();
})

}）;

只需用以下代码替换上面的代码，问题是您在id属性本身而不是选择器中添加＃。

$(document).ready(function () {
$('.info').on('click',function (e) {
    e.preventDefault();
    id = $(this).attr('id');
    id = id + '_show';
    $('div.myshow').attr('id', id);
    $('#' + id).toggle();
})

}）;

希望这有帮助。

需要使用JQuery为每个href切换一个div

3 个答案: