更新

Question

有一个值( $btn_id )，它会在页面上多次获取任何字符串。（例如$ btn_id =“btn1”，“btn2”，“btn3”）

我想在课堂上添加这些（fp-slidesNav）。但是每个fp-slidesNav上只有一次。以下代码 -

echo '<script type="text/javascript">jQuery(document).ready(function($){ $( ".fp-slidesNav" ).addClass( "'. $btn_id .'" ); });</script>';

然而它在所有fp_slidesNav上添加了像“btn1 btn2 btn3” -

<script..> script..</script><div class="fp_slidesNav btn1 btn2 btn3">.......</div> <script..> script..</script><div class="fp_slidesNav btn1 btn2 btn3">.......</div> <script..> script..</script><div class="fp_slidesNav btn1 btn2 btn3">.......</div>

这就是我想要的 -

<script..> script..</script><div class="fp_slidesNav btn1">.......</div>
<script..> script..</script><div class="fp_slidesNav btn2">.......</div>
<script..> script..</script><div class="fp_slidesNav btn3">.......</div>

请看一下这个截图。（http://prntscr.com/cf3nwr）

如您所知，$btn_id也正在改变此脚本的所有时间和数量。

任何提示？

我也试过......“最贴近”和“找到”。但没有运气..

echo '<script type="text/javascript">jQuery(document).ready(function($){ $( ".fp-slidesNav" ).closest(".fp-section").addClass( "'. $btn_id .'" ); });</script>';

这也是同样的结果。

请告诉我。

好的，我创建了这个以便更好地理解..（https://jsfiddle.net/phnsuusn/）所以颜色应该适合每个人。

再次感谢你。

Answer 1

更新

我假设OP会知道如何重构Snippet以便它可以传递一个变量。因此，此更新只是对Snippet的一个简单修改，以便它传递$btn的值并为每个元素（它已经完成的那部分）分配一个唯一的类。

请参阅下面的代码段2

继续更新

旧帖子

仅使用.each一次，就像类固醇循环一样。在每次迭代时，将className btn +后缀增加1：

var idx = i + 1;
$(this).addClass("btn" + idx);

`FIDDLE`

SNIPPET 1

$(".fp_slidesNav").each(function(i) {
  var idx = i + 1;
  $(this).addClass("btn" + idx);
});

.btn1 {
  color: red;
}
.btn2 {
  color: blue;
}
.btn3 {
  color: black;
}
.btn4 {
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fp_slidesNav">Red color</div>
<div class="fp_slidesNav">Blue color</div>
<div class="fp_slidesNav">Black color</div>
<div class="fp_slidesNav">Gray color</div>

~~~~结束SNIPPET 1 ~~~~~~~~~~~~~~~~~~~~~~~~~

更新续表

更新的关键部分如下：

var $btn_id = ['btn', 'btn', 'btn', 'btn', 'any_string_is possible', 'section_first', 'session_2nd', 'part_3', 'etc', 'THIS_IS_THE_CORRECT_WAY'];

OP从未指明$btn_id的值是如何形成的或来自何处。{ OP只表示$btn_id不断变化，没有押韵或理由。 OP也没有提到这些未知数量的字符串所处的数据结构类型。它们是否属于对象字面值？ JSON？阵列？地图？组？参数呢？所以我决定使用数组。

另一个重要的部分是：

  var ID = $btn_id[i];
  var idx = i + 1;
  $(this).addClass(ID + '-' + idx);

更新的其余部分只是额外的非必要代码，用于构建交互式函数和样式以进行演示和概念验证。详细信息也在来源中进行了评论。我试图不遗余力（在有限的时间内我给出这个答案），并且我已经扩展了原始的片段以帮助OP理解我正在尝试传达的内容。 OP显然没有时间进行研究，目前缺乏基本的jQuery / JavaScript知识。因此我建议OP实际查看代码，测试它，如果它没有返回请求的结果（两个版本都按顺序执行），请检查代码是否正常，没有我的代码。这些例子清楚地表明它起作用，并且很明显OP没有，所以记住这一点。

还有一件事。 我为每个类添加了一个递增的整数，以确保没有重复。如果这不是一个问题，你不介意有多个元素共享类（没有错误，实际上是鼓励），你删除它：

var idx = i + 1;

并删除引用idx的代码的任何部分。此修改不会影响函数的行为或分配为每个元素传入的类的功能。

SNIPPET 2

// All values of $btn_id in an array
var $btn_id = ['btn', 'btn', 'btn', 'btn', 'any_string_is possible', 'section_first', 'session_2nd', 'part_3', 'etc', 'THIS_IS_THE_CORRECT_WAY'];

/*
| On each iteration through div collection, and
| store the value of $btn_id array at the index of i.
| Add a class to this div, get the string from the
| $btn_id array and concat it to i to ensure each
| new class is unique.
*/
$(".fp_slidesNav").each(function(i) {
  var ID = $btn_id[i];
  var idx = i + 1;
  $(this).addClass(ID + '-' + idx);
});

/*
| This function is for manual testing.
| Enter an arbitrary string, then click 
| the 'add' button.
| Store the value of in1 in a variable.
| Append a div.fp_slidesNav to the end of 
| list.
| Note the new class 'in1' is concat in the
| string of the new div.
*/
$('#btn').on('click', function() {
  var in1 = $('#in1').val();
  $('body').append('<div class="fp_slidesNav ' + in1 + '"> This element\'s classes are: <\/div>');
});

.fp_slidesNav {
  width: 350px;
  padding: 15px;
  margin: 10px 5px;
  background: rgba(0, 0, 0, .6);
  color: rgba(255, 255, 255, .8);
}
/* 
| Using ':after' '{ content: .attr()' property allows
| us to access attribute values (such as
| class) and display the result as text.
*/

.fp_slidesNav:after {
  content: attr(class);
  color: yellow;
  font: 600 20px/1.5 Verdana;
}
#btn {
  line-height: 1.1;
  width: 48px;
  padding: 1px 5px;
  margin: 10px 5px;
  display: inline-block;
  cursor: pointer;
}
#in1 {
  line-height: 100%;
  display: inline-block;
  padding: 1px 5px;
}
label {
  font-size: 20px;
  vertical-align: baseline;
  padding-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for='btn in1'>
  Class:
  <input id='in1'>
  <button id='btn'>Add</button>
</label>
<div class="fp_slidesNav">This element's classes are:</div>
<div class="fp_slidesNav">This element's classes are:</div>
<div class="fp_slidesNav">This element's classes are:</div>
<div class="fp_slidesNav">This element's classes are:</div>
<div class="fp_slidesNav">This element's classes are:</div>
<div class="fp_slidesNav">This element's classes are:</div>
<div class="fp_slidesNav">This element's classes are:</div>
<div class="fp_slidesNav">This element's classes are:</div>
<div class="fp_slidesNav">This element's classes are:</div>
<div class="fp_slidesNav">This element's classes are:</div>

使用addClass jquery为每个类仅添加一次类

1 个答案:

更新

继续更新

旧帖子

`FIDDLE`

SNIPPET 1

更新续表

SNIPPET 2