创作新主题

社区所有版块导航

Python

python开源 Django Python DjangoApp pycharm

DATA

docker Elasticsearch

问与答闲聊招聘翻译创业分享发现分享创造求职区块链支付之战

aigc

aigc chatgpt

WEB开发

linux MongoDB Redis DATABASE NGINX 其他Web框架 web工具 zookeeper tornado NoSql Bootstrap js peewee Git bottle IE MQ Jquery

机器学习

机器学习算法

Python88.com

反馈公告社区推广

产品

短视频

印度

一周十大热门主题

机器学习学术速递[12.4]

让我眼前一亮的 6 个 Python 库

凯利公式（Kelly Criterion）仓位管理深度解析与Python实现

30天入门Python（基础篇）——第8天：函数式编程

ChatGPT、Grok、Gemini免费使用次数介绍

【AI】人工智能70年：从图灵测试到ChatGPT的进化史

又一个超实用的Python打包神器！

Python 跨目录导入难题破解：5 种方法 + 实战指南

2025必看AI干货!《大模型/AIGC/GPT-4/Transformer/DL/KG/NLP/C...

Python爬虫超详细讲解（零基础入门，老年人都看的懂）

私信 • 关注

CertainPerformance

CertainPerformance 最近创建的主题

» CertainPerformance 创建的更多主题

CertainPerformance 最近回复了

3 年前

回复了 CertainPerformance 创建的主题 » 我想用jQuery检查单击的元素是否是这个元素

在jQuery中 function 事件处理程序, this 将引用您将侦听器附加到的元素。这是 document 所以这就是 这 是

$(document).on('click', function() {
  console.log(this === document);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-options-icon"><i class="far fa-trash" id="clickedElement">click</i></div>

检查 event.target (它将指向事件被分派到的元素——最里面的元素)是被单击的元素。

$(document).on('click', function(e) {
  if ($(e.target).is('#clickedElement')) {
    console.log('this is clicked');
  } else {
    console.log('somewhere else clicked');
  }
});

<脚本src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script>
<div class=“菜单选项图标”>&书信电报;i class=“far fa trash”id=“clickedElement”>单击</i></部门>

5 年前

回复了 CertainPerformance 创建的主题 » Jquery-按逗号解析错误拆分的数组值

在所有环境中都不支持反向查找。在这里,您可以使用单词边界,它将匹配 \w\W 或 \W\w . (逗号是 \W -不是文字字符)

var str = "South Georgia and The South Sandwich Islands,Congo, Democratic Republic,Mauritania,Finland";
var res = str.split(/\b,\b/i);
console.log(res)

另一个(更丑的)选项是匹配一个单词字符,后跟任何字符,后跟另一个单词字符,直到lookahead匹配 ,\w 或字符串的结尾:

var str = "South Georgia and The South Sandwich Islands,Congo, Democratic Republic,Mauritania,Finland";
var res = str.match(/\w.*?\w(?=,\w|$)/g);
console.log(res)

5 年前

回复了 CertainPerformance 创建的主题 » 如何压缩这个jQuery函数

可以通过在70到99之间的数字上迭代来创建选择器字符串:

let selector = '.progress[data-goal="70"]';
for (let i = 71; i <= 99; i++) {
  selector += `, .progress[data-goal="${i}"]`;
}
$(selector).find('.progress__bar').addClass('wishlist_cash_add');

只有有一个 data-goal 从7、8或9开始,也可以使用 ^= (“attribute starts with”)语法:

$('.progress[data-goal^="7"], .progress[data-goal^="8"], .progress[data-goal^="9"]').find('.progress__bar').addClass('wishlist_cash_add');

(如果有如下元素 data-goal="3" 在那些地方,你可以考虑把它们改成 data-goal="03"

5 年前

回复了 CertainPerformance 创建的主题 » Jquery使indexOf不区分大小写的数组中的搜索

从 tags 数组中,我将构造一个不区分大小写的正则表达式,在replacer函数中,检查整个字符串(最后一个参数)中匹配项的索引,以确定在何处设置新的 selectionEnd

const tags = ["B", "I", "U", "S", "Q",
  "H1", "H2", "H3", "H4", "H5", "H6",
  "LEFT", "CENTER", "RIGHT", "SUB", "SUP",
  "H", "HR", "CODE", "SPOILER", "UL", "OL", "LI"
];
const pattern = new RegExp(tags.map(tag => `:${tag}:`).join('|'), 'i');
$("textarea").on("input", function(e) {
  let usedIndex = null;
  this.value = this.value.replace(
    pattern,
    (match, index) => {
      const tag = match.match(/\w+/)[0];
      usedIndex = index + tag.length + 4;
      return `[${tag}]    [${tag}]`
    }
  );
  if (usedIndex) {
    this.selectionEnd = usedIndex;
  }
});

textarea {
  width: 200px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea>

5 年前

回复了 CertainPerformance 创建的主题 » 返回已单击元素的子元素的jQuery click事件的event.target

这个 event.target 将始终是派遣 事件.目标 将是容器中的元素。

如果要引用侦听器附加到的元素,请使用 this 或 event.currentTarget

$("#menu a").click(function() {
  console.log(this.id);
  // pages[linkToPageId[this.id]].loadPage();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuContainer">
  <ul id="menu">
    <li>
      <a id="home"><img id="logo" src="img/logo.png" alt="logo"></a>
    </li>
    <li><a id="about">Om oss</a></li>
    <li><a id="concept">Konsept</a></li>
    <li><a id="history">Data</a></li>
    <li><a id="store">Butikk</a></li>
  </ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>

$("#menu a").click(function() {
  console.log(event.currentTarget.id);
  // pages[linkToPageId[event.currentTarget]].loadPage();
});

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<div id=“menuContainer”>
<ul id=“菜单”>
<a id=“home”><img id=“logo”src=“img/logo.png”alt=“logo”></a>
<li><a id=“about”>开放源码软件</a></li>
<li><a id=“concept”>Konsept</a></li>
<li><a id=“history”>数据</a></li>
</ul>
</分区>
<div id=“frontpage”></div>

5 年前

回复了 CertainPerformance 创建的主题 » 如何使用jquery在许多内容元素之后关闭div标记并打开一个新标记?

使用 appendTo 附加新的 .box 到身体,然后使用 .append 移动所有 .here 或者追到到那个新的 .盒子

$('<div class="box"></div>')
  .appendTo('body')
  .append($('.here, .here ~ *'));

.box {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <p>Element 1</p>
  <p>Element 2</p>
  <p>Element 3</p>
  <p class="here">Element 4</p>
  <p>Element 5</p>
  <p>Element 6</p>
</div>

5 年前

回复了 CertainPerformance 创建的主题 » 在Jquery中获取匹配类

用逗号分隔选择器,然后 .find 哪一个 .matches 正在迭代的元素:

const selector = '.foo, .barfoo';
const selectors = selector.split(', ');
$(selector).each(function() {
  console.log(
    selectors.find(sel => this.matches(sel))
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "foo" class = "bar barbar barfoo"></div>
<div class = "foo"></div>

如果要删除 . 部分, .slice 关闭:

const selector = '.foo, .barfoo';
const selectors = selector.split(', ');
$(selector).each(function() {
  console.log(
    selectors.find(sel => this.matches(sel)).slice(1)
  );
});

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<div id=“foo”class=“bar barbar barfoo”></div>
<div class=“foo”></div>

5 年前

回复了 CertainPerformance 创建的主题 » 通过jQuery访问已单击的元素<li>的最简单方法是什么?

使用 .closest 把选择器传给它 listItemToRemove 相反:

$(".delete-button").on('click', function() {
  $(this)
    .closest('.whatever')
    .slideUp(function() {
      $(this).remove();
    });
});

.delete-button {
  border: 1px solid black;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
}

li {
  list-style-type: none;
}

h1 {
  text-align: center;
  font-size: 1.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>
    Delete Some Stuff!
  </h1>
  <div>
    <ul class="mylist">
      <li class="whatever">
        <table width=100%>
          <tr>
            <td>Some Text 1</td>
            <td align="right">
              <div class="delete-container">
                <div class="delete-button">Delete</div>
              </div>
            </td>
          </tr>
        </table>
      </li>
      <li class="whatever">
        <table width=100%>
          <tr>
            <td>Some Text 2</td>
            <td align="right">
              <div class="delete-container">
                <div class="delete-button">Delete</div>
              </div>
            </td>
          </tr>
        </table>
      </li>
      <li class="whatever">
        <table width=100%>
          <tr>
            <td>Some Text 3</td>
            <td align="right">
              <div class="delete-container">
                <div class="delete-button">Delete</div>
              </div>
            </td>
          </tr>
        </table>
      </li>
      <li class="whatever">
        <table width=100%>
          <tr>
            <td>Some Text 4</td>
            <td align="right">
              <div class="delete-container">
                <div class="delete-button">Delete</div>
              </div>
            </td>
          </tr>
        </table>
      </li>
      <li class="whatever">
        <table width=100%>
          <tr>
            <td>Some Text 5</td>
            <td align="right">
              <div class="delete-container">
                <div class="delete-button">Delete</div>
              </div>
            </td>
          </tr>
        </table>
      </li>
    </ul>
  </div>
</div>

5 年前

回复了 CertainPerformance 创建的主题 » jQuery if多个.val下拉值的条件

检查可能值的数组是否包含 .val() :

$('#dropdown').change(function() {
  if ([10, 11, 12].includes(Number($(this).val()))) {
    $('#number').val('108-0<?php echo $number; ?>');
  }
});

不需要像jQuery这样的大型库来处理这些琐碎的事情:

const [dropdown, number] = ['dropdown', 'number'].map(id => document.getElementById(id));
dropdown.addEventListener('change', () => {
  if ([10, 11, 12].includes(Number(dropdown.value))) {
    number.value = '108-0<?php echo $number; ?>';
  }
});

如果需要检查多个值数组,请先将其提取到变量中:

$('#dropdown').change(function() {
  const val = Number($(this).val());
  if ([10, 11, 12].includes(val)) {
    $('#number').val('108-0<?php echo $number; ?>');
  } else if ([1, 5, 15].includes(val)) {
    $('#number').val(5000);
  }
});

6 年前

回复了 CertainPerformance 创建的主题 » Jquery/JavaScript:获取只读输入字段更改时的值[重复]

这个 .value 属性只有脚本编写器调用 setAttribute('value' 设置新值,这是一件很奇怪的事情。在几乎所有情况下,我都希望通过将 value 直接属性,例如:

input.value = 'foo';

打电话 setAttribute 确实会显示被检查的DOM的变化属性 ,例如:

<input value="somevalue">

const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);

<input>

但只是分配给 .价值 财产元素的值不会导致这样的更改:

const input = document.querySelector('input');
input.value = 'foo';
console.log(input.outerHTML);

<输入>

分配给 .价值 实际上调用 setter函数 在 HTMLInputElement.prototype :

console.log(HTMLInputElement.prototype.hasOwnProperty('value'));

你可以阴影通过放置getter/setter 价值 直接在元素本身上,setter调用您自己的函数,允许您监听更改:

const { get, set } = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const input = document.querySelector('input');
Object.defineProperty(input, 'value', {
  get() {
    return get.call(this);
  },
  set(newVal) {
    console.log('New value assigned to input: ' + newVal);
    return set.call(this, newVal);
  }
});


// example of autocomplete trying to change the input value:
input.value = 'foo';

<输入>

6 年前

回复了 CertainPerformance 创建的主题 » jquery count具有值的输入字段数

与 $(field).val() ,您正在检索第一中的元素 field jquery集合。使用 $(this).val() 相反:

$('.input').keyup(function() {

  var field = $(this).parent().children('.input');
  var count = 0;

  $(field).each(function() {
    if ($(this).val()) {
      count++;
    }
  });

  console.log(count);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <input type="text" class="input input1" />
  <input type="text" class="input input2" />
  <input type="text" class="input input2" />
</div>

<div class="row">
  <input type="text" class="input input1" />
  <input type="text" class="input input2" />
  <input type="text" class="input input2" />
</div>

您还可以删除 i 参数,因为它没有被使用。

6 年前

回复了 CertainPerformance 创建的主题 » 未使用jquery呈现

问题是链接末尾的斜杠:

"link":"https://www.forbes.com/sites/billybambrough/2019/07/07/new-ecb-boss-christine-lagarde-made-a-serious-bitcoin-warning/"

结果是

$('body').append('<div><a href=https://example.com/foo/>title</a></div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

基本上,jquery错误地解释了 /> 就在之前 />title</a> 作为一个自动关闭标签。但是 <a> S是不在HTML中自动关闭,甚至 /> 以下内容:

<!-- Renders properly - the tag does not self-close: -->
<a href=https://example.com/>click</a>

用引号将属性括起来,例如 <a href="https://example.com/">title</a> 以下内容:

var js = [{
  "title": "New ECB Boss Christine Lagarde Made A Serious Bitcoin Warning",
  "link": "https://www.forbes.com/sites/billybambrough/2019/07/07/new-ecb-boss-christine-lagarde-made-a-serious-bitcoin-warning/",
  "text": "Bitcoin and other crypto-assets have long divided traditional economists and bankers with some warning over their instability and others ...",
  "img": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-cf7C5AWRZ2mt1qip3sV9MzLok1tGn0CAInRO6kqP1J5b_VQQdQRmKXW8NsNi2BTxOYnSl-Q"
}, {
  "title": "Bitcoin Approaches $11500 as Top Cryptos See Gains",
  "link": "https://cointelegraph.com/news/bitcoin-approaches-11-500-as-top-cryptos-see-gains",
  "text": "Saturday, July 6 â most of the top 20 cryptocurrencies are reporting moderate gains on the day by press time, as Bitcoin (BTC) hovers just ...",
  "img": "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdGcmi26RdOCRqaQ0kQ8raWmw2uA7PHv3Oi936yUNA8IQN9OhXKS6Rar8gBF_7Jwd_GvRw2UA"
}]

for (var i = 0; i < js.length; i++) {
  $('body').append('<div><a href="' + js[i].link + '">' + js[i].title + '</a></div>')
}

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

或者,为了更优雅和安全,而不是手动编写html,创建一个 <a> 显式地,并将 href 财产及其 textContent 以下内容:

var js = [{
  "title": "New ECB Boss Christine Lagarde Made A Serious Bitcoin Warning",
  "link": "https://www.forbes.com/sites/billybambrough/2019/07/07/new-ecb-boss-christine-lagarde-made-a-serious-bitcoin-warning/",
  "text": "Bitcoin and other crypto-assets have long divided traditional economists and bankers with some warning over their instability and others ...",
  "img": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-cf7C5AWRZ2mt1qip3sV9MzLok1tGn0CAInRO6kqP1J5b_VQQdQRmKXW8NsNi2BTxOYnSl-Q"
}, {
  "title": "Bitcoin Approaches $11500 as Top Cryptos See Gains",
  "link": "https://cointelegraph.com/news/bitcoin-approaches-11-500-as-top-cryptos-see-gains",
  "text": "Saturday, July 6 â most of the top 20 cryptocurrencies are reporting moderate gains on the day by press time, as Bitcoin (BTC) hovers just ...",
  "img": "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQdGcmi26RdOCRqaQ0kQ8raWmw2uA7PHv3Oi936yUNA8IQN9OhXKS6Rar8gBF_7Jwd_GvRw2UA"
}];

js.forEach(({ link, title }) => {
  $('<div><a></a></div>')
    .appendTo('body')
    .find('a')
    .prop('href', link)
    .text(title);
});

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

6 年前

回复了 CertainPerformance 创建的主题 » 除了jquery函数之外,还有其他限制复选框类型选择的选项吗?

看起来输入是 td 他们不是兄弟姐妹,所以 .siblings 不会选择正确的元素。

如果他们都有相同的 single-checkbox ,然后将 .single-checkbox 在jquery集合中,并在回调中检查该集合的长度 :checked ,大于 limit :

const $singleCheckbox = $('input.single-checkbox');
$singleCheckbox.on('change', function(e) {
  var limit = 4;
  if ($singleCheckbox.filter(':checked').length > limit) {
    this.checked = false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}" /></td>
  </tr>
</table>

7 年前

回复了 CertainPerformance 创建的主题 » jquery父选择器

使用 $(this).parent() 从 .ocond 到 .dropdown-content 然后你就可以使用 .siblings('.dropbtn') 到达 .dropbtn 兄弟姐妹:

$('.ocond').on('click', function() {
  $(this).parent().siblings('.dropbtn').text("conditionvalue");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdownedit">
  <div class="dropbtn">textxyz</div>
  <div class="dropdown-content">
    <div href="#" class="ocond" id="text1">text1</div>
    <div href="#" class="ocond" id="text2">text2</div>
    <div href="#" class="ocond" id="text3">text3</div>
    <div href="#" class="ocond" id="text4">text4</div>
  </div>
</div>

你的

$(this).parents('.dropbtn')

不工作是因为 Delptn 不是 奥康德 S和

$(this).parents('.dropdownedit').siblings('.dropbtn')

因为 Delptn 不是 .dropdownedit .

你应该只使用 .parents 如果你想选择倍数有关元素的父元素-否则,最好使用 .closest (将选择一与传递的选择器匹配的祖先)或 .parent (只选择直接父元素)。

6 年前

回复了 CertainPerformance 创建的主题 » 如何使用jquery获得htm标记的完整定义?

一个选项是检查元素的 outerHTML ,并匹配 < 到 > :

const openingHtmlTag = $('#myDiv')[0]
  .outerHTML
  .match(/<[^>]+>/)[0];
console.log(openingHtmlTag);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myDiv" style="color:green" title="foobar">content<div>

或者,在属性属性可以包含 > s和转义引号,需要展开正则表达式:

const re = /^<(?:[^'">]*|(['"])(?:\\.|(?!\1).)*\1)+>/s;
const openingHtmlTag = $('#myDiv')[0]
  .outerHTML
  .match(re)[0];
console.log(openingHtmlTag);

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

<div id=“mydiv”style=“color:green”title=“foobar”>内容<div>

https://regex101.com/r/OBNoBa/1

^<(?:[^'">]*|(['"])(?:\\.|(?!\1).)*\1)+> 手段:

^< -字符串的开头,后跟 < (开始标记)
(?:[^'">]*|(['"])(?:\\.|(?!\1).)*\1)+ -重复1次以上:
- [^'">]* -除了引号或右括号,或:
- (['"])(?:\\.|(?!\1).)*\1 引用的属性:
- (['"]) -打开字符串分隔符,第一个捕获组。然后重复匹配:
  - \\. -任何转义字符(这允许,例如, \' 要匹配,而不是 ' 被解释为结束字符串分隔符),或
  - (?!\1). -除了字符串分隔符
- \1 -再次使用字符串分隔符(以引号结尾的属性)
> -打开标签的关闭

另一个选择是浅层克隆节点(从而省略它可能拥有的任何子节点),将其 外部HTML ,并去掉结束标记(这更容易匹配):

const re = /^<(?:[^'">]*|(['"])(?:\\.|(?!\1).)*\1)+>/s;
const cloned = $('#myDiv')[0].cloneNode(false);
const html = cloned.outerHTML.replace(/<\s*\/\w+\s*>$/, '');
console.log(html);

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

<div id=“mydiv”style=“color:green”title=“foobar”>内容<div>

6 年前

回复了 CertainPerformance 创建的主题 » jquery在数组中添加选项值时添加输入选项类

回调的第一个参数是正在迭代的索引,而不是元素。获取元素,引用 this ,所以 this.value 获取要检查的值。

但是 .value 元素的数组将始终是字符串,因此也将数字数组转换为字符串数组。

你也可以考虑使用 .includes 而不是 indexOf 检查一下,如果只是检查数组是否包含一个值(并且可读性更强一点),则更合适:

//array received from ajax call 
var array = [1, 3, 5]
const arrayStrs = array.map(String);

// loop through dropdown options 
$("#my_id > option").each(function() {
  // if option value in array, add class 
  if (arrayStrs.includes(this.value)) {

    // set matching values to red color 
    $(this).addClass("red");
  }

});

.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="my_id">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

(也可以使用集合而不是数组,它将在 O(1) ,可能更合适,因为您不需要有序的集合,只需要一个集合—但这并不重要)

6 年前

回复了 CertainPerformance 创建的主题 » 使用不同的上下文使用checkbox进行单独的jquery ajax调用

您可以使用选择器来选择所有 id 一开始是 driver[ :

$(document).ready(function() {
  $("[id^='driver[']").click(function(event){
    if($(this).is(':checked')){
      var domain = $(this).val();
      //alert(domain);
      $("#stage").load('call.php', 'submit=submit&domain='+domain);
    }
  });
});

从 <input> 不过,如果可能的话,例如:

<div id="container">
  <input type="checkbox" id="driver[0]" value="log.example.com">
  <input type="checkbox" id="driver[1]" value="api.example1.com">
  <input type="checkbox" id="driver[2]" value="mail.example.com">
</div>

然后

$('#container > input').click(...

6 年前

回复了 CertainPerformance 创建的主题 » 如何在jquery中不onclick?

初始化超时,然后在单击处理程序内清除超时:

const timeoutId = setTimeout(() => {
  console.log('You did not click form-submit within 5 seconds');
}, 5000);

$('.form-submit').click(function() {
  clearTimeout(timeoutId);
});

6 年前

回复了 CertainPerformance 创建的主题 » jquery-选择ID包含特定字符串且属于特定类的div

只需将选择器放在彼此旁边(中间没有空格),即可选择具有特定类和也有一个 id 匹配约束:

const certainString = 'foo';
const fooMyClasses = $(".myClass[id*=" + certainString + "]");
console.log(fooMyClasses.length);
console.log(fooMyClasses[0].outerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myClass">
</div>
<div class="myClass" id="foo123">
</div>

7 年前

回复了 CertainPerformance 创建的主题 » jquery比较中的通配符

可以使用正则表达式查看它是否以“english”开头并以 (US) 或 (UK) :

const val = $(".language").val();
if (/^English \(U[SK]\)$/.test(val)) console.log('Pass');
else console.log('Fail');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="language" value="English (UK)">

如果只想测试字符串是否以 (美国) 或 (英国) ,只需去掉正则表达式的第一部分:

const validate = str => /\(U[SK]\)$/.test(str);
console.log(validate('something (US)'));
console.log(validate('something (UK)'));
console.log(validate('something (UN)'));

将其集成到新代码中:

const $selected1 = $(".selected-1");
const $unselected1 = $(".unselected-1");
$(".languages").change(function() {
  if (/\(U[SK]\)$/.test($(this).val())) {
    $(".selected-1").show();
    $(".unselected-1").hide();
  } else {
    $(".unselected-2").show()
    $(".unselected-1").hide();
  }
});

您也可以使用 endsWith 正如您最初考虑的那样,虽然它有点不那么简洁:

const $selected1 = $(".selected-1");
const $unselected1 = $(".unselected-1");
$(".languages").change(function() {
  const val = $(this).val();
  if (val.endsWith('(UK)') || val.endsWith('(US)')) {
    $(".selected-1").show();
    $(".unselected-1").hide();
  } else {
    $(".unselected-2").show()
    $(".unselected-1").hide();
  }
});

7 年前

回复了 CertainPerformance 创建的主题 » 使用jquery遍历DOM

你可以用

$(this).parent().prev().children().data('id')

$('a').click(function(e) {
  e.preventDefault();
  console.log(
    $(this).parent().prev().children().data('id')
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        <input data-id="somevalue">
    </div>
    <div>
        <a href="">edit</a>
    </div>
</div>

你的 .find() 没有参数,不会给您任何结果,因为您没有传递任何要查找的选择器。此外,还有属性不是 id -属性是 data-id ,所以您应该使用 data('id') 而不是 attr('id') .

6 年前

回复了 CertainPerformance 创建的主题 » 用$(this)将此传递给jquery on()函数

一种选择是使用箭头函数,以便 this 保存外部范围的上下文,并使用 event.target 在单击处理程序中获取对单击元素的引用:

$(selector).on("click", "a", (event) => {    
  $(event.target).addClass("w3-green");
  $(this.panel).addClass("w3-red");
});

7 年前

回复了 CertainPerformance 创建的主题 » jquery用字符映射后的其他字符替换字母时的“循环”[副本]

textechiffre

$('#resultat2').text(textechiffre.replace(/[a-z]/gi, char => chiffrer[char]));

$('#chiffrer').keyup(function(chiffrement) {
  var chiffrer = {
    u: 'a',
    z: 'b',
    b: 'c',
    c: 'd',
    a: 'e',
    d: 'f',
    f: 'g',
    g: 'h',
    e: 'i',
    h: 'j',
    j: 'k',
    k: 'l',
    l: 'm',
    m: 'n',
    i: 'o',
    n: 'p',
    p: 'q',
    q: 'r',
    r: 's',
    s: 't',
    o: 'u',
    t: 'v',
    v: 'w',
    w: 'x',
    x: 'y',
    y: 'z'
  };
  const textechiffre = chiffrement.target.value;
  $('#resultat2').text(textechiffre.replace(/[a-z]/gi, char => chiffrer[char]));

})

$('#dechiffrer').keyup(function(dechiffrement) {
  var dechiffrer = {
    a: 'u',
    b: 'z',
    c: 'b',
    d: 'c',
    e: 'a',
    f: 'd',
    g: 'f',
    h: 'g',
    i: 'e',
    j: 'h',
    k: 'j',
    l: 'k',
    m: 'l',
    n: 'm',
    o: 'i',
    p: 'n',
    q: 'p',
    r: 'q',
    s: 'r',
    t: 's',
    u: 'o',
    v: 't',
    w: 'v',
    x: 'w',
    y: 'x',
    z: 'y'
  };
  const textedechiffre = dechiffrement.target.value;
  $('#resultat').text(textedechiffre.replace(/[a-z]/gi, char => dechiffrer[char]));
})

body {
  font-family: monospace;
  font-size: 1.5rem;
}

textarea {
  width: 200px;
  height: 150px;
  margin: auto;
}

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

textarea#dechiffrer {
  outline: none;
  background: rgba(78, 182, 185, 0.2);
}

textarea#dechiffrer,
textarea#dechiffrer::placeholder {
  color: rgba(95, 158, 160, 1);
}

textarea#chiffrer {
  outline: none;
  background: rgba(205, 92, 92, 0.2);
}

textarea#chiffrer,
textarea#chiffrer::placeholder {
  color: rgba(205, 92, 92, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <textarea type="text" placeholder="decypher" name="dechiffrer" id="dechiffrer"></textarea>
  <textarea type="text" placeholder="cypher" name="chiffrer" id="chiffrer"></textarea>
</div>
<span id="resultat"></span><br>
<span id="resultat2"></span>

6 年前

回复了 CertainPerformance 创建的主题 » 将jquery代码转换为filter list by复选框转换为普通JS

一个选项是构造一个独立的函数来检查 :checked 要显示的颜色的复选框,然后遍历 .list 并设置 display 风格得体。对于每个复选框,添加指向该函数的更改侦听器:

const checkbox = document.querySelectorAll(".checkbox");
const list = document.querySelectorAll(".list");

const examineList = () => {
  const checkedColors = [...document.querySelectorAll('.checkbox:checked')]
    .filter(input => input.checked)
    .map(input => input.dataset.color);
  const showColor = checkedColors.length
    ? color => checkedColors.includes(color)
    : color => true; // if no colors are selected, always show every <li>
  document.querySelectorAll('.list').forEach((li) => {
    li.style.display = showColor(li.dataset.color) ? 'list-item' : 'none';
  });
};

checkbox.forEach((item) => {
  item.addEventListener('change', examineList);
});

<label><input type="checkbox" class="checkbox" data-color="blue"> Blue</label>
<label><input type="checkbox" class="checkbox" data-color="green"> Green</label>
<label><input type="checkbox" class="checkbox" data-color="red"> Red</label>

<ul>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="green">Green</li>
  <li class="list" data-color="red">Red</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="blue">Blue</li>
  <li class="list" data-color="green">Green</li>
</ul>

» CertainPerformance 创建的更多回复