我得到一个这种格式的字符串"/program/527/variant/sent"（它是一个 url） 在这种情况下我需要将数字更改为其他值527。相反，program可能有另一个不同长度的值。但是 ID (527) 通常总是紧随其后。如何动态剪切并粘贴另一个值。或者用不同的值重建字符串？谢谢
有一个旧的 React App，我决定在项目中添加 eslint + prettier，然后想到通过使用 husky 添加 pre-commit hook 来禁止大家破坏项目。另外，为了不一次修复项目的所有代码，而仅在那些已更改的文件中添加 lint-staged 。这就是 package.json 的样子
{
"name": "Very intersing Project Best of the Best",
"version": "0.1.0",
"private": true,
"dependencies": {
"@many-many-diferen-dependencies": "^4.2.4",
},
"scripts": {
"start": "env-cmd -f .env.stage react-scripts start",
"start:dev": "env-cmd -f .env.dev react-scripts start",
"start:test": "env-cmd -f .env.test react-scripts start",
"start:ci": "env-cmd -f .env.ci react-scripts start",
"lint-staged": "lint-staged",
"lint": "eslint --debug src/",
"lint:write": "eslint --debug src/ --fix"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@use-it/interval": "^0.1.3",
"babel-loader": "^8.1.0",
"camelcase": "^6.2.0",
"cross-env": "^7.0.2",
"env-cmd": "^10.1.0",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.5",
"eslint-plugin-react-hooks": "^4.0.8",
"font-awesome": "^4.7.0",
"http-proxy-middleware": "^1.0.4",
"husky": "^4.2.5",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5",
"pretty-quick": "^2.0.1",
"react-moment": "^1.0.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx}": [
"eslint --fix",
"prettier --write"
]
}
}
什么是实际问题。我正在尝试添加一个 lint-staged 命令，该命令仅检查暂存文件而不首先将它们添加到暂存文件。现在这个命令只有在我执行 git status => git add 时才有效。我试图通过在此处添加 git add 来扩展“lint-staged”，但它不起作用。我想以某种方式运行这个命令。任何想法如何解决？
第二个问题可以有两个这样的块吗？
"lint-staged": {
"src/**/*.{js,jsx}": [
"eslint --fix",
"prettier --write"
]
}
像“lint-staged-1”？所以我称命令 lint-staged-1 而不是“lint-staged”。
第三个问题是如何添加一个命令来绕过 pre-commit ？这样我就可以在不运行这个钩子的情况下添加一个委员会？
这个问题可能更具理论性。在 React Hooks 上有一个应用程序，我希望在转到带有哈希的 url ( #itemId=621) 中的“产品列表”页面后，我会滚动到列表中的这个产品。
最初，在我看来，这项任务绝对是初级的。
- 在 useEffect 我得到一个哈希使用。(
ueryString.parse(history.location.hash)) - 对于每个产品图，我都会抛出 id
id={itemId=${item.id} super hash = item.id - 我通过哈希滚动得到一个节点......
它不像那样工作....我开始想通了，谷歌给出了一堆选项 with ref without ref。一堆用于此的库...在 21 年内哪种方法相关？应该往哪个方向挖？
Ps：抱歉这个天真的问题，反应对我来说是新的。而网上所有的例子通常都描述了一个基本的例子。点击链接，它滚动））
格式中有postgres数据库女士最初解压后.dump文件在存档文件中
如何从这种格式恢复？在 PgAdmin 中，甚至无法选择这种格式...mydb.dump.gzmydb.dump
您需要显示标签表中每个标签的帖子数。帖子信息存储在带有 mtm 链接的 posts_tag 表中。告诉我怎么了，我试过这样的查询，但是通过中间表的东西不起作用
SELECT count(*) FROM posts, blog_tags, tags WHERE (posts.id = blog_tags.post_id) AND (blog_tags.tag_id = tags.id);
共有三个 帖子表
id | title |body|
1 'text' 'text'
2 'text' 'text'
3 'text' 'text'
4 'text' 'text'
posts_tag
| post_id | tag_id |
1 1
3 2
2 1
1 2
2 4
1 3
tags
| id | name |
1 tag1
2 tag2
3 tag3
4 tag4
有一个对象数组。在数组的基础上绘制一个表格
任务是通过点击单元格来获取颜色段的第一个和最后一个id值。如果点击如图所示，那么应该得到“c9”和“d31”的值。对于任何其他段相同。我试图在单击时在数组中定义一个元素，并从它来回使用，直到下一个单元格的颜色与当前单元格的颜色不匹配。然后我们写下id。但是有些东西不出来。那行不通，然后永恒的循环开始了。也许 while 通常是一个坏主意。我将不胜感激
let arr = [
{
id: 'm2c',
color: 'yellow'
},
{
id: 'd1b',
color: 'red'
},
{
id: 'd6',
color: 'red'
},
{
id: 'd3',
color: 'red'
},
{
id: 'd4',
color: 'red'
},
{
id: 'd5',
color: 'yellow'
},
{
id: 'd6',
color: 'yellow'
},
{
id: 'd7',
color: 'yellow'
},
{
id: 'v1',
color: 'yellow'
},
{
id: 'c9',
color: 'red'
},
{
id: 'd1k',
color: 'red'
}, {
id: 'd92',
color: 'red'
},
{
id: 'd12',
color: 'red'
},
{
id: 'd31',
color: 'red'
},
{
id: 'd14',
color: 'yellow'
},
{
id: 'd12',
color: 'yellow'
},
{
id: 'd45',
color: 'yellow'
},
{
id: 'd3',
color: 'yellow'
},
{
id: 'd00',
color: 'yellow'
},
{
id: 'd3o',
color: 'yellow'
},
];
let ul = document.createElement('ul');
let startId = document.createElement('span');
let endId = document.createElement('span');
arr.forEach(function (item) {
let li = document.createElement('li');
li.style.backgroundColor = item.color;
li.innerHTML = item.id;
ul.appendChild(li);
});
document.getElementById('container').appendChild(ul);
document.getElementById('container').appendChild(startId );
document.getElementById('container').appendChild(ul);
document.querySelector('ul').addEventListener('click', e => {
let content = e.target.innerHTML;
let startIdValue;
let endIdValue;
arr.forEach(function (item, i, arr) {
if (item.id === content) {
while (arr[i--]) {
if (arr[i - 1].color !== item.color) {
startIdValue = item.id;
return
}
}
while (arr[i++]) {
if (arr[i + 1].color !== item.color) {
endIdValue = item.id;
return
}
}
}
});
});
ul {
width: 1000px;
padding-left: 0;
margin-left: 0;
display: flex;
}
li {
width: 50px;
height: 50px;
list-style-type: none;
border: 1px solid #ccc;
}<div id="container">
</div>你好。例如，有一个数组`
testArray = [
{
name: 'Salmon - Canned',
price: '$91.56',
},
{
name: 'Soup - Beef, Base Mix',
price: '$126.14',
},
{
name: 'Soup - Beef, Base Mix3',
price: '$126.14',
},
{
name: 'Soup - Beef, Base Mix2',
price: '$126.14',
},
];
我需要得到一个没有“价格”字段的数组。像这样：
testArray = [
{
name: 'Salmon - Canned',
},
{
name: 'Soup - Beef, Base Mix',
},
{
name: 'Soup - Beef, Base Mix3',
},
{
name: 'Soup - Beef, Base Mix2',
},
];
怎么做？
您好，如果有两个参数，在样式代码方面应该如何？让我们允许这样的转移到另一条线路？或者它应该是一条线，但它出来很长。或者也许这些参数应该分配给变量并使用它们？请告诉我。
private isTest() {
if ((this.argSorce.nativeElement.clientWidth < this.maxWidthBlock) ||
(this.argSorce.nativeElement.clientWidth < this.maxBlockContainer)) {
}
}
您好，请告诉我有哪些选项可以实现这样的任务？
有一个滑块（输入类型范围），控制数字轮播，三个数字同时显示。这里有一个问题，一位数字的输出实现没有问题。但是据我理解，要显示多个数字，需要根据滑块原理（carousel）添加逻辑，滑块控制，我想拿一个现成的滑块（Slick），通过滑块在那里。但在我看来，这不是正确的决定....有见识的人告诉我。也许这一切都可以更容易地完成？准备好解决方案，库？不幸的是我没有找到它。是否可以在不连接滑块的情况下以某种方式实现这一点？
请告诉我如何实现在一个循环中将一个类添加到一个块中。例如，我有几个块，我希望将“当前”类依次添加到每个块中，也就是说，每个块都处于活动状态一段时间，以此类推。
<div id="class-loop">
<div>
test1
</div>
<div>
test2
</div>
<div>
test3
</div>
<div>
test4
</div>
</div>
我试图循环执行它，但它会遍历元素一次并停止。我尝试在 jquery 上不使用循环，但这里出现了一些奇怪的东西。告诉我如何正确操作，我将不胜感激
setInterval(function() {
$('#class-loop > div:nth-child(1)')
.addClass('current')
.next()
.removeClass('current')
.end()
.appendTo('#class-loop');
}, 3000);.current{
color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="class-loop">
<div>
test1
</div>
<div>
test2
</div>
<div>
test3
</div>
<div>
test4
</div>
</div>有一个页面。它包含带有内容的块，通过单击块的名称，它会滚动到站点标题。有必要通过单击“返回”按钮返回到相同的块（他们离开的块）。请告诉我如何实现它。问题是有很多块，并且只有一个返回按钮。无法使用锚点，因为您需要以某种方式找出您离开了哪个街区......我将感谢您的帮助我草拟了一个示例。
$(function() {
$('h2').click(function() {
$('html, body').animate({scrollTop: 0},500);
return false;
})
}).container {
margin: 0 auto;
max-width: 780px;
}
h2 {
cursor: pointer;
}
h2:hover {
cursor: pointer;
transition: .3s;
opacity: .7;
}
ul li {
list-style-type: none;
padding: 5px;
}
ul {
padding: 5px;
}
ul li:nth-child(odd) {
background: #ccc;
}
header {
display: flex;
justify-content: space-around;
}
h1, .back {
display: flex;
margin: auto;
}
.back {
color: darkslateblue;
font-weight: 600;
cursor: pointer;
}
.back:hover {
transition: .3s;
opacity: .7;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header>
<H1>Example</H1>
<span class="back">Back ↓</span>
</header>
<ul>
<li>
<h2>Test2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test7</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test8</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test9</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test10</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test11</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
</ul>
<div>你好。有一个列表。如果列表项包含超过一定数量的字符，则应将这些字符截去，并在末尾插入三个点。现在，如果至少在一个段落中，字符多于所需字符，则在所有段落中截断该行并复制到所有段落。嗯，不应该。告诉我如何只在字符数超过允许的 CSS 属性的点处截断行，这是 text-overflow:ellipsis不合适的，因为如果有两行则不起作用。
function cutStr() {
var size = 15,
cutStr = $('li a'),
strText = cutStr.text();
if (strText.length > size) {
cutStr.text(strText.slice(0, size) + ' ...');
}
}
cutStr();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, consequatur. Fuga quasi amet labore, a fugit fugiat quaerat facilis vero dolor nam nisi tempora ipsum, omnis tempore, libero suscipit animi.</a>
</li>
<li>
<a href="">Norm lenght str</a>
</li>
<li>
<a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui magnam, assumenda doloribus earum consectetur tenetur aspernatur aperiam sit voluptate. Assumenda corrupti quo, sint ipsam accusamus dolorum eveniet repudiandae nobis! At?</a>
</li>
<li>
<a href="">Norm lenght str</a>
</li>
<li>
<a href="">Norm lenght str</a>
</li>
</ul>你好。告诉我如何对是否存在状况进行有效检查。
有一段代码负责删除触摸事件上的几个类。与检查的结果($('#popup_new_custom_kit').hasClass('popup-show')) = true
是代码不起作用，类没有被删除是必要的
初始代码
function closeSelectKitTouch() {
$(document).on('touchstart' && 'touchend', function (e) {
var container = $(".swipe-menu");
if (container.has(e.target).length === 0) {
$('.wrapper ').removeClass('active-swipe-menu');
$('#main-wrap').removeClass('active-swipe-menu');
}
});
}
更改了代码（因此一切正常）
function closeSelectKitTouch() {
$(document).on('touchstart' && 'touchend', function (e) {
if ($('#popup_new_custom_kit').hasClass('popup-show')) {
// что тут должно быть?
}
else {
var container = $(".swipe-menu");
if (container.has(e.target).length === 0) {
$('.wrapper ').removeClass('active-swipe-menu');
$('#main-wrap').removeClass('active-swipe-menu');
}
}
});
}
让我感到困惑的是，在我的行动中，如果它只是空的。
实际上在它和一个问题是否有可能这样离开？或者应该有什么？
您好，我想实现平滑滚动到位于另一个页面上的块。
为了在当前页面上平滑滚动，我使用以下代码：
function handler(event) {
var hash = event.target.hash;
var headerHeight = $('header').height();
if (hash) {
event.preventDefault();
var tag = $(hash);
if ($(hash).length) {
var offset = tag.offset().top - headerHeight;
$('html, body').stop().animate({scrollTop: offset},'slow');
}
}
}
$('.main-nav a').on( "click", handler );
如果我指定一个指向此格式的另一个页面的链接，则会有一个过渡，并且会急剧跳转到带有 id 的块。如何使这个跳跃顺利？
问题如下。上面有一个带有链接的简单html页面，点击后，下一页应该打开并滚动到正确的位置。我认为这样的构造 href="link/#id" 应该可以工作，但它不起作用（
您好，您能否就以下问题的可能解决方案提出建议。该页面有一个带有菜单项的侧边栏，当您单击菜单项时，它会滚动到页面上的相应部分。问题是菜单的菜单项可以改变，在这里也可以添加代码和内容。我想让它滚动到页面上具有相同文本的标题。类似于“单击菜单项，获取其文本，然后滚动到页面内容中的相同文本”
这是页面的结构https://jsfiddle.net/8ue02gud/2/
<div class="container">
<ul class="menu">
<li class="item">
<a href="">test1</a>
</li>
<li class="item">
<a href="">test2</a>
</li>
<li class="item">
<a href="">test3</a>
</li>
<li class="item">
<a href="">test4</a>
</li>
<li class="item">
<a href="">test5</a>
</li>
</ul>
<ul class="content" id="viewer">
<li>
<h2>test1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
</li>
<li>
<h2>test2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
</li>
<li>
<h2>test3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
</li>
<li>
<h2>test4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita rerum voluptates, sequi autem sint cupiditate a nihil quae rem ullam dolorem maiores corrupti laborum earum possimus, accusamus voluptate dicta veritatis!</p>
</li>
</ul>
</div>
.container{
display: flex;
}
.menu{
width:15%;
list-style-type:none;
}
.item a{
color:8C8757;
}
.content{
width:85%;
}
.content li::nth-child(odd){
background-color:#8C8475;
}
h2{
color:#8C6D8A;
}
你好。我想使用以下构造重写脚本：
健康）状况 ？表达式1：表达式2
$('#search-btn').click(function () {
console.log('test')
if ( $(".boolean ").hasClass("checked")) {
return
}
else if( $('#search_material').val() == ''){
$('#search_material').focus()
}
else $('.type-checkbox ').addClass('active-confirm');
});
不幸的是，我无法制作工作版本。告诉我出了什么事？
$('#search-btn').click(function () {
( $(".boolean ").hasClass("checked") ) ? return :
( $('#search_material').val() == '') ? $('#search_material').focus() :
$('.type-checkbox ').addClass('active-confirm');
});
请帮我解决这个问题。我有一张桌子。其中数据由后端动态加载。通过单击该行，下方会出现另一行，其中指示每个单元格的百分比变化。根据正面或负面动态，百分比颜色为绿色或红色。为此，添加了绿色或红色类。这就是它的本质和工作原理！
这是我需要做的。
在每个单元格::after 的帮助下，我添加了一个小圆圈，它应该是红色或绿色的，就像隐藏行中的数据一样。基本上，我需要以某种方式检查下一行中每个单元格中的类，并将类添加到上一行的单元格中。为此，我创建了类.green-circle和.red-circle. 为了清楚起见，我已将这些类添加到某些单元格中。并创建了一个例子。但我需要动态地做它，它对我不起作用。我也不想改变 HTML 结构，或者至少这样做。
$(document).on('click', 'th:first-child', function () {
$(this).toggleClass('active');
$(".hidden").toggleClass('visible');
});* {
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
}
table {
width: 100%;
}
th, tr {
padding: 10px 15px;
}
th {
font-size: 15px;
color: grey;
}
.hidden {
opacity: 0;
}
th:first-child {
padding: 10px 60px;
position: relative;
cursor: pointer;
}
tr:first-child th:first-child::after {
display: none;
}
.green {
color: green;
}
.red {
color: red;
}
.visible {
opacity: 1;
transition: .3s;
}
.visible th::after {
display: none;
}
.title th {
position: relative;
}
.title th::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 5px;
height: 5px;
background: grey;
border-radius: 50%;
}
.title .green-circle::after {
background: green;
}
.title .red-circle::after {
background: red;
}
th:last-child::after {
display: none;
}
.title-line:first-child::after {
content: '';
position: absolute;
right: 42px;
top: 13px;
background: transparent;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #2b435c;
}
.title-line:first-child.active {
color: #007bff;
}
.title-line:first-child.active::after {
top: 17px;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #007bff transparent transparent transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table>
<tbody >
<tr>
<th></th>
<th>feb</th>
<th>mar</th>
<th>apr</th>
<th>may</th>
<th>jun</th>
<th>jul</th>
<th></th>
<th>growmn rate</th>
</tr>
<tr class="title">
<th class="title-line">
Active
</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th>18%</th>
</tr>
<tr class="hidden">
<th></th>
<td class="green">50%</td>
<td class="green">50%</td>
<td class="red">50%</td>
<td class="red">50%</td>
<td class="green">50%</td>
<td class="red">50%</td>
<td class="green">50%</td>
<td class="green"></td>
</tr>
<tr class="title">
<th class="title-line">
Active2
</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th class="green-circle">6%</th>
<th >90%</th>
</tr>
<tr class="hidden">
<th></th>
<td class="green">50%</td>
<td class="green">50%</td>
<td class="red">50%</td>
<td class="red">50%</td>
<td class="green">50%</td>
<td class="red">50%</td>
<td class="green">50%</td>
<td class="green"></td>
</tr>
<tr class="title">
<th class="title-line">
Active3
</th>
<th>6%</th>
<th>6%</th>
<th class="red-circle">6%</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th>6%</th>
<th>1%</th>
</tr>
<tr class="hidden">
<th></th>
<td class="green">50%</td>
<td class="green">50%</td>
<td class="red">50%</td>
<td class="red">50%</td>
<td class="green">50%</td>
<td class="red">50%</td>
<td class="green">50%</td>
<td class="green"></td>
</tr>
</tbody>
</table>
</div>需要优化一个旧应用程序。有页面搜索。通过单击找到的一个，页面上的该文本应该会滚动。它是如此执行。但由于某种原因，它不起作用。请告诉我搜索还有一件事是区分大小写的。我理解是因为 :contains 。什么可以代替它？谢谢
$("#autocompleateitem2").on("filterablebeforefilter", function (e, data) {
var $ul = $(this),
$input = $(data.input),
value = $input.val(),
html = "";
$ul.html("");
if (value && value.length > 2) {
$ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
$ul.listview("refresh");
var a = $input.val();
$('.textLayer div:contains(' + a + ')')
.map(function () {
html += "<li><a href='#' title='" + $(this).html() + "'>" + $(this).html() + "</a></li>";
});
$ul.html(html);
$ul.listview("refresh");
$ul.trigger("updatelayout");
}
$("#autocompleateitem2 a").click(function () {
var elementClick = $(this).attr("title").toString();
console.log(elementClick);
console.log(elementClick.isPrototypeOf());
var element = $( elementClick );
console.log(element);
$('#viewer').scrollTo(element, {duration: 'slow', offsetTop: '60'});
});
});