javascript - 使用 jQuery 按按钮更改内容

Question

$('.btn').click(function() {
  $('#contentLeft div').hide();
  $('#contentRight div').hide();
  var target = $(this).data('target');
  $(target).show();
})

@import url('https://fonts.googleapis.com/css?family=Montserrat');
.row {
  margin-left: 4%;
  margin-botton: 30px;
}

#contentTab1 {}

#contentTab2 {
  display: none;
  p {
    color: red;
  }
}

#contentTab3 {
  display: none;
  p {
    font-family: 'Montserrat', sans-serif;
    color: green;
  }
}

#contentRight {
  border: 1px dashed red;
}

#contentTabRight2,
#contentTabRight3 {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
  <div class="" style="padding-top:12px;">
    <button type="button" class="btn btn-primary" id="Btn1" data-target="#contentTab1,#contentTabRight1">Button 1</button>
    <button type="button" class="btn btn-primary" id="Btn2" data-target="#contentTab2,#contentTabRight2">Button 2</button>
    <button type="button" class="btn btn-primary" id="Btn3" data-target="#contentTab3,#contentTabRight3">Button 3</button>
  </div>
</div>

<div class="row">
  <div id="contentLeft" class="col-sm-4">
    <div id="contentTab1">
      <h2>Some Title 1</h2>
      <p>This is the content for pressing button 1. Venenatis iaculis tempor suspendisse condimentum egestas a a nulla odio eu parturient nibh parturient sem risus aliquam feugiat a enim nam ullamcorper suspendisse cum ullamcorper ac vestibulum adipiscing.
        Vestibulum dignissim vivamus nec iaculis vestibulum parturient conubia et ac scelerisque arcu litora mus ipsum.</p>
    </div>
    <div id="contentTab2">
      <h2>Some Title 2</h2>
      <p>
        Posuere posuere vestibulum vestibulum lobortis a venenatis libero tempor fermentum vestibulum purus suspendisse suspendisse a quam magnis eleifend magnis taciti parturient sit mi mi.
      </p>
    </div>
    <div id="contentTab3">
      <h2>Some Title 3</h2>
      <p>
        Nisl eu mus nec a molestie nulla molestie leo urna vestibulum maecenas a vestibulum et velit dis. Cum a convallis sagittis magnis ullamcorper a bibendum a quis lobortis vitae lacinia vel sem ultricies interdum convallis tincidunt ac arcu nam. Id vivamus
        mi dapibus ultricies nisi consectetur congue felis a nullam a condimentum lacinia a est imperdiet.
      </p>
      <button class="btn btn-success">Click me</button>
    </div>
  </div>


  <div id="contentRight" class="col-sm-8">
    <div id="contentTabRight1">
      <h3>
        Right Side Content Title 1
      </h3>
      <p>
        Nascetur nec ultrices condimentum torquent.
      </p>
      <img src="https://placeimg.com/300/100/tech/sepia" class="img-responsive">
    </div>
    <div id="contentTabRight2">
      <h3>
        Right Side Content Title 2
      </h3>
      <p>
        some content paragraph goes here...
      </p>
      <img src="https://placeimg.com/300/100/tech" class="img-responsive">
    </div>
    <div id="contentTabRight3">
      <h3>
        Right Side Content Title 3
      </h3>
      <p>
        Integer a a dictum diam dictumst magnis a vestibulum tellus convallis leo in parturient sodales purus himenaeos egestas.Nibh orci dui fames.
      </p>
      <img src="https://placeimg.com/300/100/any/grayscale" class="img-responsive">
    </div>
  </div>
</div>

我在使用 jQuery 更改 Div 中的内容时遇到问题。我有一个包含 3 个按钮的页面，当按下新按钮时，我需要在屏幕上的 2 个位置(左列和右列)更新内容。我让它与第一个 Div 一起更新，但我无法让第二个 Div 更新。非常感谢任何建议或帮助。

$('.btn').click(function() {
  $('#contentLeft div').hide();
  var target = '#' + $(this).data('target');
  $(target).show();
})

@import url('https://fonts.googleapis.com/css?family=Montserrat');

.row {
  margin-left: 4%;
  margin-botton: 30px;
}

#contentTab1 {
  
}

#contentTab2 {
  display:none;
  p {
    color: red;
  }
}

#contentTab3 {
  display:none;
  p {
    font-family: 'Montserrat', sans-serif;
    color: green;
  }
}

#contentRight {
  border: 1px dashed red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
    <div class="" style="padding-top:12px;">
      <button type="button" class="btn btn-primary" id="Btn1" data-target="contentTab1,contentTabRight1">Button 1</button>
      <button type="button" class="btn btn-primary" id="Btn2" data-target="contentTab2,contentTabRight2">Button 2</button>
      <button type="button" class="btn btn-primary" id="Btn3" data-target="contentTab3,contentTabRight3">Button 3</button>
    </div>
</div>

<div class="row">
  <div id="contentLeft" class="col-sm-4">
    <div id="contentTab1">
      <h2>Some Title 1</h2>
      <p>This is the content for pressing button 1. Venenatis iaculis tempor suspendisse condimentum egestas a a nulla odio eu parturient nibh parturient sem risus aliquam feugiat a enim nam ullamcorper suspendisse cum ullamcorper ac vestibulum adipiscing. Vestibulum dignissim vivamus nec iaculis vestibulum parturient conubia et ac scelerisque arcu litora mus ipsum.</p>
    </div>
    <div id="contentTab2">
      <h2>Some Title 2</h2>
      <p>
      Posuere posuere vestibulum vestibulum lobortis a venenatis libero tempor fermentum vestibulum purus suspendisse suspendisse a quam magnis eleifend magnis taciti parturient sit mi mi.
      </p>
    </div>
    <div id="contentTab3">
      <h2>Some Title 3</h2>
      <p>
      Nisl eu mus nec a molestie nulla molestie leo urna vestibulum maecenas a vestibulum et velit dis. Cum a convallis sagittis magnis ullamcorper a bibendum a quis lobortis vitae lacinia vel sem ultricies interdum convallis tincidunt ac arcu nam. Id vivamus mi dapibus ultricies nisi consectetur congue felis a nullam a condimentum lacinia a est imperdiet.
      </p>
      <button class="btn btn-success">Click me</button>
    </div>
  </div>
  
  
  <div id="contentRight" class="col-sm-8">
    <div id="contentTabRight1">
      <h3>
        Right Side Content Title 1
      </h3>
      <p>
      Nascetur nec ultrices condimentum torquent.
      </p>
      <img src="https://placeimg.com/300/100/tech/sepia" class="img-responsive">
    </div>
    <div id="contentTabRight2">
      <h3>
        Right Side Content Title 2
      </h3>
      <p>
        some content paragraph goes here...
      </p>
      <img
      src="https://placeimg.com/300/100/tech" class="img-responsive">
    </div>
    <div id="contentTabRight3">
      <h3>
        Right Side Content Title 3
      </h3>
      <p>
        Integer a a dictum diam dictumst magnis a vestibulum tellus convallis leo in parturient sodales purus himenaeos egestas.Nibh orci dui fames.
      </p>
      <img src="https://placeimg.com/300/100/any/grayscale" class="img-responsive">
    </div>
  </div>
</div>

Answer 1

那是因为您将 ID 引用作为逗号分隔的字符串存储在 data-target 属性中，并且在从所述字符串构造选择器时，您只是附加了一个 # 开始，即:

contentTab1,contentTabRight1

...会给你:

#contentTab1,contentTabRight1，后者不是有效的 CSS 选择器。您想要的是通过 , 分隔符拆分字符串，然后将 # 附加到它们中的每一个。一个例子:

var target = $(this).data('target').split(',').map(function(t) {
    return '#' + t;
}).join(',');
$(target).show();

或者，您只需更新 data-target 中的硬编码值，以使用正确的选择器格式开始，例如#contentTab1,#contentTabRight1，那么你根本不需要改变你的JS逻辑。

下面的例子引用了我的第一个解决方案:

$('.btn').click(function() {
  $('#contentLeft div').hide();
  var target = $(this).data('target').split(',').map(function(t) {
    return '#' + t;
  }).join(',');
  $(target).show();
})

@import url('https://fonts.googleapis.com/css?family=Montserrat');

.row {
  margin-left: 4%;
  margin-botton: 30px;
}

#contentTab1 {
  
}

#contentTab2 {
  display:none;
  p {
    color: red;
  }
}

#contentTab3 {
  display:none;
  p {
    font-family: 'Montserrat', sans-serif;
    color: green;
  }
}

#contentRight {
  border: 1px dashed red;
}

#contentTabRight2, #contentTabRight3 {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
    <div class="" style="padding-top:12px;">
      <button type="button" class="btn btn-primary" id="Btn1" data-target="contentTab1,contentTabRight1">Button 1</button>
      <button type="button" class="btn btn-primary" id="Btn2" data-target="contentTab2,contentTabRight2">Button 2</button>
      <button type="button" class="btn btn-primary" id="Btn3" data-target="contentTab3,contentTabRight3">Button 3</button>
    </div>
</div>

<div class="row">
  <div id="contentLeft" class="col-sm-4">
    <div id="contentTab1">
      <h2>Some Title 1</h2>
      <p>This is the content for pressing button 1. Venenatis iaculis tempor suspendisse condimentum egestas a a nulla odio eu parturient nibh parturient sem risus aliquam feugiat a enim nam ullamcorper suspendisse cum ullamcorper ac vestibulum adipiscing. Vestibulum dignissim vivamus nec iaculis vestibulum parturient conubia et ac scelerisque arcu litora mus ipsum.</p>
    </div>
    <div id="contentTab2">
      <h2>Some Title 2</h2>
      <p>
      Posuere posuere vestibulum vestibulum lobortis a venenatis libero tempor fermentum vestibulum purus suspendisse suspendisse a quam magnis eleifend magnis taciti parturient sit mi mi.
      </p>
    </div>
    <div id="contentTab3">
      <h2>Some Title 3</h2>
      <p>
      Nisl eu mus nec a molestie nulla molestie leo urna vestibulum maecenas a vestibulum et velit dis. Cum a convallis sagittis magnis ullamcorper a bibendum a quis lobortis vitae lacinia vel sem ultricies interdum convallis tincidunt ac arcu nam. Id vivamus mi dapibus ultricies nisi consectetur congue felis a nullam a condimentum lacinia a est imperdiet.
      </p>
      <button class="btn btn-success">Click me</button>
    </div>
  </div>
  
  
  <div id="contentRight" class="col-sm-8">
    <div id="contentTabRight1">
      <h3>
        Right Side Content Title 1
      </h3>
      <p>
      Nascetur nec ultrices condimentum torquent.
      </p>
      <img src="https://placeimg.com/300/100/tech/sepia" class="img-responsive">
    </div>
    <div id="contentTabRight2">
      <h3>
        Right Side Content Title 2
      </h3>
      <p>
        some content paragraph goes here...
      </p>
      <img
      src="https://placeimg.com/300/100/tech" class="img-responsive">
    </div>
    <div id="contentTabRight3">
      <h3>
        Right Side Content Title 3
      </h3>
      <p>
        Integer a a dictum diam dictumst magnis a vestibulum tellus convallis leo in parturient sodales purus himenaeos egestas.Nibh orci dui fames.
      </p>
      <img src="https://placeimg.com/300/100/any/grayscale" class="img-responsive">
    </div>
  </div>
</div>