Question

所以我有这些按钮，我希望它们显示一个ID相同的部分。

<aside>
    <button type="button" id="N">16-50mm</button>
    <button type="button" id="J">25-75mm</button>
    <button type="button" id="M">30-50mm</button>
    <button type="button" id="G">50-120mm</button>
    <button type="button" id="K">50-100mm</button>
    <button type="button" id="A">75-200mm</button>
    <button type="button" id="C">75-200mm</button>
    <button type="button" id="F">75-150mm</button>                  
</aside>

<section id="N">
    <figure>
        <a href="A1.html"><img src="Images/000-001.jpg" alt="Image1 A1"></a>
        <br>
        <figcaption>Name</figcaption>
    </figure>
</section>

<section id="J">
    <figure>
        <a href="A1.html"><img src="Images/000-001.jpg" alt="Image2 A1"></a>
        <br>
        <figcaption>Name2</figcaption>
    </figure>
</section>

我在某处看到人们使用data-id或data-attribute来显示特定的id。我可以制作类似<button type="button" data-id="N">16-50mm</button>的内容，它应该显示<section id="N">。如果有人能帮助我，我感激不尽。

Answer 1

正如您所见，您在一个{% extends "base.jinja" %} {% block script %} <script type="text/javascript" src="static/js/addOffer.js"></script> <script type="text/javascript" src="static/js/bootstrap-datepicker.min.js"></script> <link href="static/css/datepicker.css" rel="stylesheet"> {% endblock %} {% block title %} Add Offer {% endblock %} {% block content %} <legend><h1> Add Offer </h1></legend> <br> <div class="row"> <div class="col-md-1"></div> <div class="col-md-10"> <form id="offerForm"enctype="multipart/form-data" class="form-horizontal" action="{{ url_for('portal.add_offer') }}" data-toggle="validator" role="form" method="post"> <div class="form-group"> <label class="control-label col-xs-3" for="file">OFFER LISTING IMAGE *</label> <div class="col-xs-7 input-group"> <input id="image" type="file" class="form-control" name="listing_image" accept="image/x-png" data-error="{{help.listing_image}}" required> <span class="help-block with-errors">{{help.listing_image}}</span> </div> </div> <div class="form-group"> <label class="control-label col-xs-3" for="file">OFFER DETAIL IMAGE *</label> <div class="col-xs-7 input-group"> <input id="image" type="file" class="form-control" name="detail_image" accept="image/x-png" data-error="{{help.detail_image}}" required> <span class="help-block with-errors">{{help.detail_image}}</span> </div> </div> </form> </div> <div class="col-md-1"></div></div> </div> {% endblock %}中无法拥有重复的id属性。更好的方法是使用document属性。试试这个：

data

$('aside button').click(function() {
  $('section').hide().filter('#' + $(this).data('id')).show();
});

Working example

Answer 2

将ID的{{1}}更改为班级。然后使用以下内容开始。

＆＃13;

section

＆＃13;

$('aside button').click(function(event){
  $('section.' + this.id).addClass('hide')
      .siblings('section').removeClass('hide');
})

＆＃13;

.hide{display:none;}

＆＃13;

Answer 3

你的问题不明确。如果您希望按钮显示按钮点击事件，则无法使用相同的＆＃34; id＆＃34;按钮和部分。也许澄清你的问题，以便我可以帮助你。

按钮选择id

3 个答案: