javascript 相关问题

JavaScript(不要与Java混淆)是一种高级,动态,多范式,面向对象,基于原型的弱类型语言,用于客户端和服务器端脚本。它的主要用途是渲染和操作网页。使用此标记可以了解有关ECMAScript及其各种方言/实现的问题(不包括ActionScript和Google-Apps-Script)。

Laravel 应用程序与 socket.io 的设置问题

我尝试将socket.io与Laravel集成,但没有成功。我一直无法找到全面的文档来促进这种集成。我遵循了 Lara 的一些文档...

回答 1 投票 0

错误:由于错误而失败:bunsh:没有这样的文件或目录正在运行bun dev

所以,我今天转向Windows,我安装了Bun,但是当我运行脚本bun dev时它说: 错误:由于错误而失败:bunsh:没有这样的文件或目录。 奇怪的是,当我运行相同的

回答 1 投票 0

使用自定义 Google 地图类型时画布上没有鼠标事件

我正在使用自定义地图类型为每个地图图块绘制画布。加载图块后,我会根据图块和图块内的像素位置在这些画布上进行绘制。我正在尝试添加一个

回答 1 投票 0

React中如何将按钮和输入线放在同一层

我正在尝试使用react制作一个页面,现在我有一个输入字段和一个按钮,我希望按钮的底边与输入底线处于同一水平,这是我的代码: `

回答 0 投票 0

如何使用按钮更改网站上的文本颜色?

我想知道如何使用按钮更改网站上的整个文本(段落、链接、标题)? 我已经设法使用 Javascript 更改网站上的背景颜色: 函数 chngebg (id) { ...

回答 3 投票 0

在执行多个获取请求时无法使用await

我正在从 API 获取数据。第一个获取 URL 传递数据,它返回成功,另一个获取 URL 然后使用第二个获取 URL 获取数据并打印它。我无法将 wait 用作

回答 2 投票 0

使用大都会博物馆 API 标签参数

除了“tags”参数之外,我使用大都会艺术博物馆 API 没有任何问题。 这是他们对标签格式的描述。 范围 格式 笔记 标签 布尔值,true 或 f...

回答 1 投票 0

如何使用fetch在react/javascript中发送curl请求?

我想提出一个请求..这是curl请求 卷曲 --location --request POST '2.2.2.22:343/sudun/cars' \ --header '授权:承载 sdswmaiqwasae*********' \ --header '内容类型:应用...

回答 1 投票 0

为什么我的 fetch() 发送的是空 JSON 正文?

我一直在尝试使用 fetch 发送 JSON 数据,但后端收到一个空对象。 在我的客户端 JS 中我有 const 用户 =“公司1”; const 用户名 = "muneeb"; 常量数据...

回答 1 投票 0

Javascript:使用 foreach 循环嵌套获取..?

这是我的问题:我需要向我的服务器发出一些获取 POST 请求。服务器保存一个名称列表。每个名称对应于我需要浏览的元素列表,以便找到 sp...

回答 1 投票 0

“该网站的所有者已根据您的浏览器签名禁止您访问”......在 python 程序中的 url 请求上

在Python(准确地说是Entought Canopy)上使用urllib2执行一个简单请求时,服务器拒绝我访问: data = urllib.urlopen(由于声誉、参数而无法发布的网址) 打印...

回答 3 投票 0

分页项目符号上的数字

我在这里遇到了一个线程,它显示了我正在尝试做的事情,但我不知道如何将其实现到我正在开发的现有网站中。这是一个 HTML/JS/CSS 网站,我有滑动幻灯片...

回答 1 投票 0

使用代理模拟异步构建器模式API

我正在尝试模拟 knex 进行测试。一切似乎都有效,但将代理附加到数组作为原型似乎消除了数组的可迭代性。 这是模拟函数。后续作品...

回答 1 投票 0

过渡不适用于 HeadlessUI 的 Dialog 组件

我正在使用 Next.JS 14.1.3 我从 HeadlessUI 添加了 并设置了 TailwindCSS,但是当我尝试在页面上打开模态窗口时,尽管我提供了所有内容,但根本没有任何转换...

回答 1 投票 0

React OnClick 事件行为是意外的

产品卡 函数 ProductCard ({图像, 名称, 统计信息, id}){ 让调度 = useDispatch() 让数量 = 1 返回 ( <> 产品卡 function ProductCard ({image, name, stats, id}){ let dispatch = useDispatch() let quantity = 1 return ( <> <div className="product-card"> <div className="product-image-wrapper"> <img src={image} alt="" /> </div> <div className="image-metadata"> <div className="data-wrapper"> <div className="product-details"> <div className="product-category">{stats.category}</div> <div className="product-name">{name}</div> </div> <div className="action-btn-wrapper"> <div className="add-to-cart" onClick={()=>{ dispatch(addToCart({name,image,stats,id,quantity})) } }> <img src={addToCartIcon} alt="" /> </div> </div> </div> </div> </div> </> ) } CART 组件 import React, { useEffect } from "react"; import Header from "../components/header"; import Footer from "../components/footer"; import Checkout from "../components/checkout"; import { useSelector } from "react-redux"; function Cart (){ let cartCount = useSelector(state => state.cart.cart) useEffect(()=>{ document.title = `TRAX- Cart(${cartCount.length} Items)` },[cartCount]) return ( <> <Header/> <Checkout/> <Footer/> </> ) } export default Cart; 结帐组件 import React from "react"; import cartImage from '../assets/website-icons/9026048_shopping_cart_simple_icon.svg' import productImage from '../assets/featured/chair-model.jpg' import arabicImage from '../assets/featured/arabic-model.jpg' import { useSelector } from "react-redux"; import CartItem from "../widgets/cartItem"; function Checkout(){ let cartCount = useSelector(state => state.cart.cart) return ( <div className="cart-wrapper"> <div className="cart-page-icon"> <div className="icon-container"> <img src= {cartImage} alt="Shopping Cart Icon" /> {/* CART */} </div> </div> <div className="mini-slogan-wrapper"> Shop for upto $200 to enjoy<span>FREE SHIPPING</span>. </div> <div className="cart-table-content"> <div className="cart-table"> <div className="table-cell header-cell"> <div className="table-col-1">Product</div> <div className="table-col-2">Quantity</div> <div className="table-col-3">Price</div> <div className="table-col-4">Subtotal</div> </div> { cartCount.map(({name,image,stats,id,quantity}) => { return <CartItem id={id} productImage={image} quantity={quantity} productStats={{category : stats.category, color : stats.color}} productName={name}/> }) } {/* <div className="table-cell"> <div className="table-col-1"> <div className="product-entry"> <div className="product-image"> <img src={productImage} alt="" /> </div> <div className="product-description"> <div className="product-name">Sunny T-Shirt Merch By Zomato</div> <div className="product-extras">Color: Red, Size : XL, Fabric : Cotton</div> <div className="product-remove-btn">Remove</div> </div> </div> </div> <div className="table-col-2"> <div className="quantity-adjuster"> <div className="decrementor"> <img src={decrementor} alt="" /> </div> <div className="quantity-value">1</div> <div className="incrementor"> <img src={incrementor} alt="" /> </div> </div> </div> <div className="table-col-3">$300</div> <div className="table-col-4">$300</div> </div> <div className="table-cell"> <div className="table-col-1"> <div className="product-entry"> <div className="product-image"> <img src={arabicImage} alt="" /> </div> <div className="product-description"> <div className="product-name">Arabic Scarf - Embroidery Print</div> <div className="product-extras">Color: Mehroon, Size : Standard, Fabric : Linen</div> <div className="product-remove-btn">Remove</div> </div> </div> </div> <div className="table-col-2"> <div className="quantity-adjuster"> <div className="decrementor"> <img src={decrementor} alt="" /> </div> <div className="quantity-value">1</div> <div className="incrementor"> <img src={incrementor} alt="" /> </div> </div> </div> <div className="table-col-3">$120</div> <div className="table-col-4">$120</div> </div> */} </div> <div className="checkout-container"> <div className="checkout-heading"> Cart Summary </div> <div className="selection-group"> <div className="selection-option"> <div className="selection-indicator-wrapper"> <div className="selection-ball"></div> </div> <div className="selection-value">Regular Shipping</div> <div className="selection-cost">$12.00</div> </div> <div className="selection-option"> <div className="selection-indicator-wrapper"> <div className="selection-balls"></div> </div> <div className="selection-value">Express Shipping</div> <div className="selection-cost">20.00</div> </div> </div> <div className="checkout-secondary-row" id="checkout-subtotal"> <div className="heading-secondary-row">Subtotal</div> <div className="cost-secondary-row">$420</div> </div> <div className="checkout-secondary-row" id="checkout-tax"> <div className="heading-secondary-row">Tax</div> <div className="cost-secondary-row">$10</div> </div> <div className="checkout-total" id="checkout-total" > <div className="heading-total">Total</div> <div className="cost-total">$430</div> </div> <div className="checkout-btn">Checkout</div> </div> </div> </div> ) } export default Checkout; 购物车商品组件 import React from "react"; import decrementor from '../assets/website-icons/decrementor.svg' import incrementor from '../assets/website-icons/incrementor.svg' import { useDispatch } from "react-redux"; import { removeFromCart,incrementQty,decrementQty } from "../state-manager/Slices/cartSlice"; function CartItem ({productImage,productName, productStats,id,quantity}){ let dispatch = useDispatch() return ( <div className="table-cell"> <div className="table-col-1"> <div className="product-entry"> <div className="product-image"> <img src={productImage} alt="" /> </div> <div className="product-description"> <div className="product-name">Sunny T-Shirt Merch By Zomato</div> <div className="product-extras">Color:{productStats.color}, Size : XL, Fabric : Cotton</div> <div className="product-remove-btn" onClick={()=>{ dispatch(removeFromCart({productImage,productName,productStats,id})) }}>Remove</div> </div> </div> </div> <div className="table-col-2"> <div className="quantity-adjuster"> <div className="decrementor" onClick={()=>{ dispatch(decrementQty({id})) }}> <img src={decrementor} alt="" /> </div> <div className="quantity-value">{quantity}</div> <div className="incrementor" onClick={()=>{ dispatch(incrementQty({id})) }}> <img src={incrementor} alt="" /> </div> </div> </div> <div className="table-col-3">${300}</div> <div className="table-col-4">${quantity * 300}</div> </div> ) } export default CartItem; 卡片切片 import { createSlice } from "@reduxjs/toolkit" let CartSlice = createSlice({ name : 'Cart', initialState : { cart : [], checkoutTotal : 0 }, reducers : { addToCart : (state,action)=>{ if(state.cart.length < 1){ state.cart = [...state.cart, action.payload] }else { state.cart.map(item => { if(item.id == action.payload.id){ item.quantity++; }else { state.cart = [...state.cart, action.payload] } }) } }, removeFromCart : (state,action)=>{ state.cart.map((item, index, cartItemArray) =>{ if(item.id == action.payload.id){ let rar = cartItemArray.splice(index,1) console.log(rar) } }) }, incrementQty : (state,action)=>{ state.cart.map(item =>{ console.log(action.payload) if(item.id == action.payload.id){ item.quantity = item.quantity + 1 } }) }, decrementQty : (state,action)=>{ state.cart.map(item =>{ if(item.id == action.payload.id){ if(item.quantity > 0){ item.quantity = item.quantity - 1 }else { console.log('its already nulled out') } } }) } } }) export default CartSlice.reducer export const {addToCart,removeFromCart, incrementQty,decrementQty} = CartSlice.actions 我正在使用 redux 进行状态管理,每当我添加到购物车时,第三次单击时,购物车计数开始加倍,例如从 2 到 4,从 4 到 6 等等,我已经尝试了很多,但我不能我的头围绕着它。请让我知道我做错了什么? 发生这种情况是因为您循环遍历购物车中的所有商品,并且对于每个商品,您将整个购物车附加到 cart 中。 您需要做的是将现有商品替换为相同商品但数量不同。像这样的东西: state.cart.map(item => item.id == action.payload.id ? {...item, quantity: item.quantity + 1 } : item); 我无法测试代码,但我希望它至少能帮助您找出问题。 如果这有帮助,请告诉我。

回答 1 投票 0

减小/增大屏幕尺寸时可绘制窗口无法到达屏幕最右侧的问题

#酒吧 { 位置:固定; /* 固定位置以在滚动时保持在适当的位置 */ 顶部:0; 底部:0; 左:0; 宽度:3px; /* 条形的初始宽度 */ 背景色...</desc> <question vote="0"> <pre><code>&lt;html&gt; &lt;style&gt; #bar { position: fixed; /* Fixed position to stay in place on scroll */ top: 0; bottom: 0; left: 0; width: 3px; /* Initial width of the bar */ background-color: #f1f1f1; /* Background of the bar */ border-right: 1px solid #d3d3d3; /* Border of the bar */ z-index: 9; } #handle { width: 100px; /* Diameter of the handle circle */ height: 100px; /* Height of the handle circle */ background-color: #2196F3; border-radius: 50%; /* Make it round */ position: absolute; /* Absolute position within the bar div */ top: 50%; /* Center it vertically */ right: -3.125em; /* Align to the right of the bar */ transform: translateY(-50%); /* Adjust vertical position */ cursor: pointer; /* Change cursor to indicate it&#39;s draggable */ z-index: 10; clip-path: inset(0 0 0 50%); /* Clip left half of the circle */ background-image: url(&#39;https://i.gifer.com/2P5x.gif&#39;); background-repeat: no-repeat; background-size: 90% 100%; /* Width and height values */ background-position: calc(100% + 0.625em) center; /* Move the image to the right by 10 pixels from the edge */ } #handle.blue-bg { background-image: url(&#39;https://virtualisedreality.files.wordpress.com/2012/07/the-best-top-desktop-blue-wallpapers-blue-wallpaper-blue-background-hd-33.jpg&#39;); background-position-x: right; } &lt;/style&gt; &lt;body&gt; &lt;div id=&#34;bar&#34;&gt; &lt;!-- This is the draggable handle --&gt; &lt;div id=&#34;handle&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;script&gt; // Make the handle draggable dragElement(document.getElementById(&#34;handle&#34;)); function dragElement(elmnt) { var startPosX = 0, currentPosX = 0; var maxBarWidth = window.innerWidth - (elmnt.offsetWidth / 16); // Tarayıcı penceresinin genişliğini kullanma , Set the maximum width for the bar. elmnt.onmousedown = dragMouseDown; function dragMouseDown(e) { e = e || window.event; e.preventDefault(); startPosX = e.clientX; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); currentPosX = e.clientX - startPosX; startPosX = e.clientX; var bar = document.getElementById(&#34;bar&#34;); var newWidth = bar.clientWidth + currentPosX; //console.log(`newWidth = ${bar.clientWidth} + ${currentPosX} = ${newWidth}`) // Define the minimum width to keep the handle from entering the bar area var minBarWidth = 3; // This is the initial width of the bar // Restrict the width within the minimum and maximum bounds newWidth = Math.max(minBarWidth, Math.min(newWidth, maxBarWidth)); // Set the new width bar.style.width = newWidth + &#34;px&#34;; var handle = document.getElementById(&#34;handle&#34;); // Adding or removing the &#39;blue-bg&#39; class based on the handle&#39;s position if (newWidth &gt;= maxBarWidth) { handle.classList.add(&#39;blue-bg&#39;); } else { handle.classList.remove(&#39;blue-bg&#39;); } } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; } } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>您好,当我缩小屏幕尺寸(比如90%、100%)时,向右拖动的窗口无法到达屏幕右下角。它可以到达屏幕的中间点等区域。 简而言之,如何确保在所有情况下,无论屏幕放大还是缩小,可绘制窗口都能到达屏幕的最右侧?这个问题有什么办法解决吗?</p> <p><em><strong>问题:</strong></em></p> <p><a href="https://i.stack.imgur.com/GUliM.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0dVbGlNLnBuZw==" alt=""/></a></p> <p><em><strong>即使放大或缩小,当您将手柄拉至最右侧时,在任何情况下都希望出现的视图:</strong></em></p> <p><a href="https://i.stack.imgur.com/SfkXN.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1Nma1hOLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>这里的问题是,当您调整窗口大小时,您没有获得更新的窗口宽度。因此,要解决这个问题,就是在调整窗口大小时再次调用dragElement</p> <pre><code>// Make the handle draggable dragElement(document.getElementById(&#34;handle&#34;)); window.addEventListener(&#34;resize&#34;, function() { // call again the function if window is resize so it gets the updated window width dragElement(document.getElementById(&#34;handle&#34;)); }); </code></pre> </answer> </body></html>

回答 0 投票 0

在javascript中将数组中的项目移动到顶部

我需要从一个数组中删除一项,然后将其放入另一个数组的顶部。 我目前有一系列文章,其中一些文章的类型是 Hero is true,其他的只是

回答 7 投票 0

在跨度维度内渲染MathJax

我正在以编程方式创建 HTML 标签以使用 MathJax 显示 LaTeX 公式。看起来公式是在计算 标签的尺寸后渲染的。我想要...

回答 1 投票 0

我的笑话文件未使用正确的返回值

我很确定这很容易解决,但我已经被这个问题困扰了一段时间了。我正在使用 Jest 构建一个后台(后端)测试文件。这是我的background.test.js ` 常量

回答 1 投票 0

元素的Xpath仅基于文本内容?

我正在尝试获取此 HMTL 代码的第二个按钮“购买”的 xpath,但不使用类、id 或其他属性或完整的 Xpath,仅使用与其相关的文本内容,如下所示

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.