带有 noConflict 和分配 noConflict 变量的 jQuery

Posted 2023-05-09

【中文标题】带有 noConflict 和分配 noConflict 变量的 jQuery

【英文标题】：jQuery with noConflict and Assignment of noConflict Variables

【发布时间】：2016-11-14 00:13:28

【问题描述】：

我一直在一个页面上使用 2 个不同版本的 jQuery，并试图利用“noConflict”。 如果我为每个 jQuery 版本建立一个变量（例如：$a 和 $b），我会用 '$a' 和 '$b' 替换所有 $'s 吗？

例如（完整代码的 sn-p [显示在底部]）.. 不确定将 $b 放在哪里。

<script>
$b(document).ready(function() 
function clone()
  var $cloned = $('table tr:last').clone();
  var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
  var newIndex = parseInt(oldIndex,10)+1;
  $cloned.find('input').each(function()
     var newName = $(this).attr('name').replace(oldIndex, newIndex);
     $(this).attr('name', newName);
  );
  $cloned.insertAfter('table tr:last');

$('p.add-btn').click(clone)

;
</script>

下面是 html 表单代码，以及 jQuery 克隆函数以及日期选择器函数。目前，当我启用一个时，另一个功能不起作用。感谢您提供任何线索。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>var $a = jQuery.noConflict(true);  //sets up 1st version of jquery to run for Zebra datepicker</script>

<script type="text/javascript" src="zebra_datepicker/js/zebra_datepicker.js"></script>
<link rel="stylesheet" href="zebra_datepicker/css/default.css" type="text/css">
<script>
$a(document).ready(function() 

    $a('#SubmissionDate').Zebra_DatePicker(
        view: 'years',
        readonly_element: true
        );

    $a('#ClassYear').Zebra_DatePicker(
        view: 'years',
        format: 'Y',
        readonly_element: true
        );


 );
</script>


<script>
$b(document).ready(function() 
function clone()
  var $cloned = $('table tr:last').clone();
  var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
  var newIndex = parseInt(oldIndex,10)+1;
  $cloned.find('input').each(function()
     var newName = $(this).attr('name').replace(oldIndex, newIndex);
     $(this).attr('name', newName);
  );
  $cloned.insertAfter('table tr:last');

$('p.add-btn').click(clone)

;
</script>



<table id="FormLayout" cellspacing="3" cellpadding="3">
<tr>
<td class="FormLabel" ><strong>Class Year*</strong></td>
<td ><input type="text" id="ClassYear" name="ClassYear_1" class="required" value="<%= Request.form("ClassYear") %>" tabindex="4" /></td>
 </tr>
 <tr><td>
 <button type="button" id="add-btn">Add Class Year</button>
 </td></tr>              
 <tr>
 <td colspan="4" align="center"><input type="hidden" name="FormSubmit" value="True" />
 <input type="submit" value="Submit" tabindex="8" />
 </td>
 </tr>
 </table>

【参考方案1】：

如果我为每个 jQuery 版本建立一个变量（例如：$a 和 $b），我会用 '$a' 和 '$b' 替换所有 $'s 吗？ em>

是的，你必须这样做，从声明指向前方的变量的那一行开始，你只能使用该变量声明调用 jQuery 函数/方法。

//Assume that by this time there is 'noConflict' declared variable you can still invoke a method of jquery using this.
$().

//But as you declared a 'noConflict' variable
var $a = jQuery.noConflict();
//$() would return undefined.

【讨论】：

函数中的$是否也可以替换为$a？例如，下面的所有 $ 是否都将更改为 $a var $cloned = $('table tr:last').clone();

@buck1112 是的，所有 jQuery 方法/函数调用都应该在声明后更改。

谢谢。在下面的代码中，$clone 会保持原样吗？ jQuery.noConflict(true); function clone2() var $cloned = $('table tr:last').clone();

不，您不必更改它，$clone 不是 jquery 函数/方法。这是你自己的声明..通常建议当你命名一个 jquery 对象时，你应该用'$'命名它们，例如，$variableName 这将表明它是一个 jquery 对象..但这不是必需的，它只是一个约定 :) .

非常感谢您的帮助。 ..有助于极大地阐明命名约定。 :)

【参考方案2】：

请试试这个：

包括原始版本。

然后包含Zebra datepicker所需的版本。

之后，您不需要任何冲突处理，只需使用$ 调用您的插件即可。确保console.log('$.fn.jquery');

使用您的插件后，您需要调用oldV = jQuery.noConflict( true ); 将全局范围的jQuery 变量恢复到加载的第一个版本。在接下来的代码中，正常使用$。