Question

我知道有人问过类似的问题，但我觉得我的设置与我看到的略有不同。我有以下标记：

$("#oneLink").on('click', function(e){
  e.preventDefault();
  $('#oneLinkText').toggleClass('checked').siblings().removeClass('checked');
});
 
$("#twoLink").on('click', function(e){
  e.preventDefault();
  $('#twoLinkText').toggleClass('checked').siblings().removeClass('checked');
});
 
$("#threeLink").on('click', function(e){
  e.preventDefault();
  $('#threeLinkText').toggleClass('checked').siblings().removeClass('checked');
});

.text-area {
display: none;
}

.checked {
display: block;
}

#oneLinkText {
background-color: red;
}

#twoLinkText {
background-color: green;
}

#threeLinkText {
background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <div class="row">
          <div class="col-sm-6 col-lg-9">
            <div class="links-container">
              <a id="oneLink" href="#">Link 1</a>
              <a id="twoLink" href="#">Link 2</a>
              <a id="threeLink" href="#">Link 3</a>
            </div>
          </div>
          <div class="text-content-container col-sm-6 col-lg-3">
            <div id="oneLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
            <div id="twoLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
            <div id="threeLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
          </div>
        </div>
      </div>

现在，我遇到的问题是使单击与相应的文本区域相关，而没有当前的重复代码。我知道这是非常低效的。因此，例如，单击#oneLink会显示#oneLinkText并从所有其他.text-area中删除该类。

在没有重复的情况下是否可以进行这种交叉引用？

Answer 1

您可以利用以下事实：您的div ID与链接几乎相同：

$("a").on('click', function(e){
  e.preventDefault();
  $('#' + $(this).attr('id') + 'Text').toggleClass('checked').siblings().removeClass('checked');
});

Answer 2

希望这将足够接近。我创建了一个自定义属性来保存目标textarea ID，其余工作由jQuery完成。让我知道任何问题或需要改进的地方。

$(".aLink").on("click",function(e){
  e.preventDefault();
  let content = $(this).attr("data-content");
  $("#"+content).show();
  
  //hide other textarea
  $(".aLink").not(this).each(function(){
    let content = $(this).attr("data-content");
    $("#"+content).hide();
  });
});

.text-area {
display: none;
}

#oneLinkText {
background-color: red;
}

#twoLinkText {
background-color: green;
}

#threeLinkText {
background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <div class="row">
          <div class="col-sm-6 col-lg-9">
            <div class="links-container">
              <a class="aLink" data-content="oneLinkText" href="#">Link 1</a>
              <a class="aLink" data-content="twoLinkText" href="#">Link 2</a>
              <a class="aLink" data-content="threeLinkText" href="#">Link 3</a>
            </div>
          </div>
          <div class="text-content-container col-sm-6 col-lg-3">
            <div id="oneLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
            <div id="twoLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
            <div id="threeLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
          </div>
        </div>
      </div>

Answer 3

简单..可以使用相同的类，而无需ID的..您只需在href属性中添加目标div，就像这样<a class="showText" href="#oneLinkText">Link 1</a>

$(".showText").on('click', function(e){
  e.preventDefault();
  $($(this).attr('href')).toggleClass('checked').siblings().removeClass('checked');
});

.text-area {
display: none;
}

.checked {
display: block;
}

#oneLinkText {
background-color: red;
}

#twoLinkText {
background-color: green;
}

#threeLinkText {
background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <div class="row">
          <div class="col-sm-6 col-lg-9">
            <div class="links-container">
              <a class="showText" href="#oneLinkText">Link 1</a>
              <a class="showText" href="#twoLinkText">Link 2</a>
              <a class="showText" href="#threeLinkText">Link 3</a>
            </div>
          </div>
          <div class="text-content-container col-sm-6 col-lg-3">
            <div id="oneLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
            <div id="twoLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
            <div id="threeLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
          </div>
        </div>
      </div>

其他：：如果需要在加载时显示特定文本，则可以添加从0开始的.eq(0).click() .eq(index)索引，以便第一个文本显示..您可以更改0随便是1还是2 ..参见下一个代码

$(".showText").on('click', function(e){
  e.preventDefault();
  $($(this).attr('href')).toggleClass('checked').siblings().removeClass('checked');
}).eq(0).click();

.text-area {
display: none;
}

.checked {
display: block;
}

#oneLinkText {
background-color: red;
}

#twoLinkText {
background-color: green;
}

#threeLinkText {
background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <div class="row">
          <div class="col-sm-6 col-lg-9">
            <div class="links-container">
              <a class="showText" href="#oneLinkText">Link 1</a>
              <a class="showText" href="#twoLinkText">Link 2</a>
              <a class="showText" href="#threeLinkText">Link 3</a>
            </div>
          </div>
          <div class="text-content-container col-sm-6 col-lg-3">
            <div id="oneLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
            <div id="twoLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
            <div id="threeLinkText" class="text-area">
              <p>
                Some Text
              </p>
              <a class="button button-std" href="#">Text</a>
            </div>
          </div>
        </div>
      </div>

Answer 4

如果您的链接和div与名称无关...的另一种方式...

<div class="links-container">
              <a id="oneLink" data-target="#oneLinkText" href="#">Link 1</a>
              <a id="twoLink" data-target="#twoLinkText" href="#">Link 2</a>
              <a id="threeLink" data-target="#threeLinkText" href="#">Link 3</a>
            </div>

$(".links-container a").on('click', function(e){
  e.preventDefault();
  $(this.attr("data-target")).toggleClass('checked').siblings().removeClass('checked');
});

添加课程并从其他人中删除

4 个答案: