Question

我需要添加anaytics来跟踪每个按钮点击的标注。

我的代码如下......

var headers = $(".callouts .callout-inner h2").text();
var buttons = $(".callouts .callout-inner a.button");
buttons.addClass("button-data");
buttons.attr("data-button-info", headers);

a.button {
  text-decoration: none;
  padding: 10px;
  background: #00007f;
  color: #fff;
  border-radius: 10px;
  font-family: Arial;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.5s ease;
}

a.button:hover {
  background: #efefef;
  color: #00007f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container callouts">
  <div class="col-sm-6 col-md-4 callout-wrapper">
    <div class="callout">
      <img class="img-responsive" alt=" " src="#" width="350" height="117">
      <div class="callout-inner">
        <h2>First Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 1</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 callout-wrapper">
    <div class="callout">
      <img class="img-responsive" alt=" " src="#" width="350" height="117">
      <div class="callout-inner">
        <h2>Second Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 2</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
  <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 callout-wrapper callout3">
    <div class="callout">
      <img class="img-responsive" alt=" " width="350" height="117">
      <div class="callout-inner">
        <h2>Third Header 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 3</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
</div>

我得到的最终结果是每个按钮的data-button-info属性包含每个h2（如果你在运行代码片段后检查按钮，你可以更好地看到发生了什么）。我的目标是让每个按钮都具有相应的h2文本值作为跟踪目的的属性。因此，例如“按钮1”包含“data-button-info”属性，其值为“First Header 1”。我不明白为什么它用所有的h2值填充属性。

我很感激这里有任何帮助和指导，因为我对jquery / js很新。

提前致谢！

Answer 1

此代码可满足您的需求

$(".callouts .callout-inner").each(function(){
    var header = $(this).find("h2").text();
    var button = $(this).find("a.button");
    button.addClass("button-data");
    button.attr("data-button-info", header);
});

Answer 2

您需要使用each()访问您的收藏集，并将元素本身称为$(this)的点引用，如：

var buttons = $(".callouts .callout-inner a.button");
buttons.addClass("button-data").each(function(){
  var headers = $(this).parent().find('h2').text();
  $(this).attr("data-button-info", headers);
})

a.button {
  text-decoration: none;
  padding: 10px;
  background: #00007f;
  color: #fff;
  border-radius: 10px;
  font-family: Arial;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.5s ease;
}

a.button:hover {
  background: #efefef;
  color: #00007f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container callouts">
  <div class="col-sm-6 col-md-4 callout-wrapper">
    <div class="callout">
      <img class="img-responsive" alt=" " src="#" width="350" height="117">
      <div class="callout-inner">
        <h2>First Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 1</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 callout-wrapper">
    <div class="callout">
      <img class="img-responsive" alt=" " src="#" width="350" height="117">
      <div class="callout-inner">
        <h2>Second Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 2</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
  <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0 callout-wrapper callout3">
    <div class="callout">
      <img class="img-responsive" alt=" " width="350" height="117">
      <div class="callout-inner">
        <h2>Third Header 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed lacus placerat, malesuada magna vitae, blandit risus. Nunc lobortis justo eu purus vestibulum porta.</p>
        <a class="button" href="#" target="_self">Button 3</a>
      </div>
      <div class="callout-bottom"></div>
    </div>
  </div>
</div>

Answer 3

这也有效，

for(let keys in buttons) {
    let button = $(buttons[key]);
    let buttonData = $(button.parent().siblings('h2')[0]).text();
    button.attr("data-button-info", buttonData);
}

如何通过jquery添加动态属性？

3 个答案: