我有一个基于站点管理员打开的票证的日历。我们有四种类型的门票： 待办的 进行中 完成的 取消 这是我有日历的 div： 我有一个基于站点管理员打开的票证的日历。我们有四种类型的门票： 待定 进行中 完成了 取消 这是我有日历的div： <div class="col-lg-6 col-md-10 col-sm-11"> <div class="card"> <div class="card-header" data-background-color="blue"> <h4 class="title">Calendario</h4> </div> <br> <section class="content"> <?php $events = TicketData::getEvents(); foreach($events as $event){ $thejson[] = array("title"=>$event->title,"url"=>"./?view=editticket&id=".$event->id,"start"=>$event->date_at."T".$event->time_at); } // print_r(json_encode($thejson)); ?> <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?> }); }); </script> <div class="row"> <div class="col-md-12"> <div id="calendar"> </div> </div> </div> </section> </div> </div> 门票的数据库结构很简单：id、title、description、date_at、time_at、created_at、tecnico_id和status_id。 我想使用 if 脚本“着色”事件： 这是我的代码，但它不起作用。 <section class="content"> <?php $events = TicketData::getEvents(); // $status->status_id; foreach($events as $event){ $thejson[] = array("title"=>$event->title,"url"=>"./?view=editticket&id=".$event->id,"start"=>$event->date_at."T".$event->time_at,); $thejsonColor[] = array($event->status_id); } // print_r(json_encode($thejson)); ?> <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?>, if ($thejsonColor=1){ eventColor: 'fb8c00' }else if ($thejsonColor=2){ eventColor: 'ff0' } else if ($thejsonColor=3){ eventColor: '43a047' } else { eventColor: '00acc1' } }); }); </script> 我想让它们符合颜色标准，这样用户就可以知道哪些票是待处理的、不完整的、完整的和已取消的。 我是 javascript 的新手，我不知道如何做到这一点。你们能帮助我或指出我应该如何做吗？ 您可以在迭代事件数组时设置颜色： <?php // helper function to pick the right color function getColor($id) { $eventColor = ''; if ($id == 1) { $eventColor = '#fb8c00'; } else if ($id == 2) { $eventColor = '#ff0'; } else if ($id == 3) { $eventColor = '#43a047'; } else { $eventColor = '#00acc1'; } return $eventColor; } $events = TicketData::getEvents(); //pulls the events from TicketData.php foreach($events as $event) { $thejson[] = array( "title" => $event->title, "url" => "./?view=editticket&id=".$event->id, "start" => $event->date_at."T".$event->time_at, "color" => getColor($event->status_id)); } ?> 然后就像你现在正在做的那样回显事件： <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?>, }); }); </script> 或者您可以通过从 php 中的表中选择来完成此操作，例如： $sql = "SELECT CASE WHEN tickets='Pending'" THEN '#C6E0B4' WHEN tickets='In progres' THEN '#FFFF99' END AS color" $schedules = $conn->query($sql); $sched_res = []; foreach($schedules->fetch_all(MYSQLI_ASSOC) as $row){ $sched_res[$row['id']] = $row; } 然后就像你现在正在做的那样回显事件： <script> $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: jQuery.now(), editable: false, eventLimit: true, // allow "more" link when too many events events: <?php echo json_encode($thejson); ?>, }); }); </script>
<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" aria-label="Update" (click)="updateSelectedScopes()" [mtTooltip]="disabledContent" > Update </button> <ng-container *ngIf="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)"> <ng-template #disabledContent>No New Scopes Values Selected</ng-template> </ng-container> 如果在该条件下禁用按钮，如何在悬停时显示工具提示文本，并且当我将鼠标悬停在其上时，我会看到红色关闭图标。这是我尝试过的，但没有成功 将此添加到覆盖材质样式的文件中： // this workaround allows for the tooltips to appear on disabled buttons (since mouse events aren't fired for them) button:disabled.mat-mdc-tooltip-trigger { pointer-events: auto !important; // remove the ripple effect on hover > span:first-child { display: none; } } 悬停时它将显示没有波纹背景的工具提示。
首页 &... <div class="menu-bar"> <ul> <li><a href="/Home/index.html"> <i class="fa fa-house"></i>Home</a> </i></li> < ul > </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; </style> 我想从 fa fa-house 的 cdn 图标中删除 :hover 效果。 <div class="menu-bar"> <ul> <li> <i class="fa fa-home"></i> <a href="/Home/index.html"> Home </a> </li> </ul> </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; } .menu-bar ul li i{ pointer-events: none; } </style> <div class="menu-bar"> <ul> <li><i class="fa fa-house"></i><a href="/Home/index.html"> Home</a> </i></li> <ul > 只需从 <i> 标签中取出 <a> 元素（图标）即可。 你可以试试这个：- <div class="menu-bar"> <ul> <li><i class="fa fa-house"><a href="/Home/index.html"> </i>Home</a> </i></li> </ul> </div> <style> .menu-bar ul li a:hover { color: black; transition: all 0.2s; border-inline-end: 2px solid; border-block-end: 2px solid; } </style>
如何使用 Bootstrap 5 禁用自定义范围而不更改样式？
我有范围： 我有范围： <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> </head> <body> <div class="container mb-4 col-sm-5"> <input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%"> </div> </body> </html> 我想禁用它（它应该仍然看起来一样，但用户不能再与它交互），但是不改变样式。例如： 图中，顶部的启用，底部的禁用；我想禁用它，同时保持顶级范围的样式。 我尝试手动重新创建原始样式，但没有成功： <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" /> <style> input[type=range]:disabled { background-color: blue; color: blue; background: blue; } </style> </head> <body> <div class="container mb-4 col-sm-5"> <input type="range" class="custom-range" min="0" max="10" value="10" id="range-input" style="width: 100%" disabled> </div> </body> </html> 除此之外，我在研究中找不到任何其他可能的解决方案。 您实际上需要“如何”禁用它？ 设置 pointer-events: none 并添加 tabindex="-1"，你会得到一个看起来仍然相同的元素，但用户无法再与之交互（至少通过鼠标单击/点击，并且他们无法通过键盘将其聚焦）控制其中之一 - 不确定是否还有其他什么？） 由于没有设置 name 属性，该字段不会成为表单提交数据集的一部分 - 如果在您的实际用例中有所不同，您也可以删除（并重新设置）名称，当您可以打开和关闭 tabindex。
这是一个基本组件。 和 都有 onClick 函数。我只想触发 上的 onClick，而不是 。我怎样才能实现这个目标？ 我玩过 这是一个基本组件。 <ul> 和 <li> 都有 onClick 函数。我只想触发 <li> 上的 onClick，而不是 <ul>。我怎样才能实现这个目标？ 我尝试过 e.preventDefault()、e.stopPropagation()，但无济于事。 class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() { return ( <ul onClick={(e) => { console.log('parent'); this.handleClick(); }} > <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} > </li> </ul> ) } } // => parent // => child 我也有同样的问题。我发现 stopPropagation did 有效。我会将列表项拆分为一个单独的组件，如下所示： class List extends React.Component { handleClick = e => { // do something } render() { return ( <ul onClick={this.handleClick}> <ListItem onClick={this.handleClick}>Item</ListItem> </ul> ) } } class ListItem extends React.Component { handleClick = e => { e.stopPropagation(); // <------ Here is the magic this.props.onClick(); } render() { return ( <li onClick={this.handleClick}> {this.props.children} </li> ) } } React 使用事件委托和文档上的单个事件侦听器来处理冒泡事件，例如本例中的“单击”，这意味着不可能停止传播；当您在 React 中与真实事件交互时，真实事件已经传播。 React 的合成事件上的 stopPropagation 是可能的，因为 React 在内部处理合成事件的传播。 stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); } 关于 DOM 事件的顺序：CAPTURING vs BUBBLING 事件传播有两个阶段。这些被称为 “捕获” 和 “冒泡”。 | | / \ ---------------| |----------------- ---------------| |----------------- | element1 | | | | element1 | | | | -----------| |----------- | | -----------| |----------- | | |element2 \ / | | | |element2 | | | | | ------------------------- | | ------------------------- | | Event CAPTURING | | Event BUBBLING | ----------------------------------- ----------------------------------- 首先发生捕获阶段，然后是冒泡阶段。当您使用常规 DOM api 注册事件时，默认情况下事件将成为冒泡阶段的一部分，但这可以在事件创建时指定 // CAPTURING event button.addEventListener('click', handleClick, true) // BUBBLING events button.addEventListener('click', handleClick, false) button.addEventListener('click', handleClick) 在React中，冒泡事件也是你默认使用的。 // handleClick is a BUBBLING (synthetic) event <button onClick={handleClick}></button> // handleClick is a CAPTURING (synthetic) event <button onClickCapture={handleClick}></button> 让我们看一下handleClick回调（React）： function handleClick(e) { // This will prevent any synthetic events from firing after this one e.stopPropagation() } function handleClick(e) { // This will set e.defaultPrevented to true // (for all synthetic events firing after this one) e.preventDefault() } 我在这里没有看到提到的替代方案 如果您在所有事件中调用 e.preventDefault()，您可以检查事件是否已被处理，并防止再次处理它： handleEvent(e) { if (e.defaultPrevented) return // Exits here if event has been handled e.preventDefault() // Perform whatever you need to here. } 关于合成事件和原生事件的区别，请参阅React文档：https://reactjs.org/docs/events.html 这是防止单击事件前进到下一个组件然后调用 yourFunction 的简单方法。 <Button onClick={(e)=> {e.stopPropagation(); yourFunction(someParam)}}>Delete</Button> 这不是 100% 理想，但如果在儿童中传递 props 太痛苦 -> 儿童时尚或为此目的创建 Context.Provider/Context.Consumer just），你正在处理另一个库，它有自己的处理程序，它在您的处理程序之前运行，您也可以尝试： function myHandler(e) { e.persist(); e.nativeEvent.stopImmediatePropagation(); e.stopPropagation(); } 据我了解，event.persist方法可以防止对象立即被扔回React的SyntheticEvent池中。因此，当你伸手去拿 React 中传递的 event 时，它实际上并不存在！这种情况发生在孙子中，因为 React 在内部处理事情的方式是首先检查父进程是否有 SyntheticEvent 处理程序（特别是如果父进程有回调）。 只要您不调用 persist 来创建大量内存以继续创建诸如 onMouseMove 之类的事件（并且您没有创建某种 Cookie Clicker 游戏，例如 Grandma's Cookies），就应该完全没问题！ 另请注意：偶尔阅读他们的 GitHub，我们应该密切关注 React 的未来版本，因为他们可能最终会解决一些问题，因为他们似乎打算在编译器中折叠 React 代码/转译器。 如果您希望发生嵌套元素中的操作而不是父元素中的操作，那么，您可以从父元素的操作处理程序中检查目标的类型，然后基于该类型执行操作，即，如果目标是我们的嵌套元素，我们什么也不做。否则两个处理程序都会被调用。 // Handler of the parent element. Let's assume the nested element is a checkbox function handleSingleSelection(e) { if(e.target.type !== 'checkbox') { // We do not do anything from the // parent handler if the target is a checkbox ( our nested element) // Note that the target will always be the nested element dispatch(lineSelectionSingle({ line })) } } 我在 event.stopPropagation() 工作时遇到问题。如果您也这样做，请尝试将其移动到单击处理程序函数的顶部，这就是我需要做的来阻止事件冒泡。示例函数： toggleFilter(e) { e.stopPropagation(); // If moved to the end of the function, will not work let target = e.target; let i = 10; // Sanity breaker while(true) { if (--i === 0) { return; } if (target.classList.contains("filter")) { target.classList.toggle("active"); break; } target = target.parentNode; } } 您可以通过检查事件目标来避免事件冒泡。 例如，如果您将输入嵌套到 div 元素，其中有单击事件的处理程序，并且您不想处理它，则单击输入时，您可以将 event.target 传递到您的处理程序中，并检查处理程序应该是根据目标的属性执行。 例如，您可以检查 if (target.localName === "input") { return}。 所以，这是一种“避免”处理程序执行的方法 解决此问题的另一种方法可能是在子级上设置 onMouseEnter 和 onMouseLeave 事件。 （您的 < li > 标签） 每当鼠标悬停在子级上时，您都可以设置一个特定的状态，以阻止父级执行 onClick 函数内容。 比如： class List extends React.Component { constructor(props) { super(props) this.state.overLi = false } handleClick() { // do something } render() { return ( <ul onClick={(e) => { if (!this.state.overLi) { console.log("parent") this.handleClick() } }} > <li onClick={(e) => { console.log("child") // prevent default? prevent propagation? this.handleClick() }} onMouseEnter={() => this.setState({ overLi: true, }) } onMouseLeave={() => this.setState({ overLi: false, })} ></li> </ul> ) } } 我进行了很多搜索，但没有设法使用 e.stopPropagation() 为我的上下文实现任何解决方案 您可以验证点击的元素是否是预期的元素。 例如： class List extends React.Component { constructor(props) { super(props); } handleClick(e) { if(e.target.className==='class-name'){ // do something } } render() { return ( <ul {/* Replace this with handleClick */} onClick={(e) => { console.log('parent'); this.handleClick(); }} <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} </li> </ul> ) } } 执行此操作的新方法更加简单，并且会节省您一些时间！只需将事件传递到原始点击处理程序并调用 preventDefault();。 clickHandler(e){ e.preventDefault(); //Your functionality here }
构建了一个小费计算器，但希望通过获取正在单击的按钮的innerHTML来缩短代码。 账单总额： 构建了一个小费计算器，但想通过获取正在单击的按钮的innerHTML来缩短代码。 Total Bill: <input id="bill" type="text"> <button type="button" onclick="tip15()">15</button> <button type="button" onclick="tip18()">18</button> <button type="button" onclick="tip20()">20</button> <div id="tip">You owe...</div> function tip15(){ var totalBill = document.getElementById("bill").value; var totalTip = document.onclick.innerHTML var tip = totalBill * 0.15; document.getElementById("tip").innerHTML = "$" +tip } 这种方法的问题是我必须写出三个版本的函数来与小费金额相对应。我想创建一个函数来获取被单击按钮的innerHTML 并在函数中使用该值。我希望它看起来像这样 function tip(){ var totalBill = document.getElementById("bill").value; **var totalTip = GET INNERHTML OF CLICKED BUTTON** var tip = totalBill * ("." + totalTip); document.getElementById("tip").innerHTML = "$" +tip } 这样我就可以在不同的按钮上运行相同的功能。 使用 HTML5 数据属性。 <button type="button" data-tip="15" onclick="getTip(this)">15</button> 您传递给函数的参数this指的是正在单击的按钮。然后你就可以得到这样的属性值： function tip(button){ var tip= button.getAttribute("data-tip"); ... } 剩下的留给你了。 像这样改变：将值传递给tip函数。 <button id="15" type="button" onclick="tip(15)">15</button> <button id="18" type="button" onclick="tip(18)">18</button> <button id="20" type="button" onclick="tip(20)">20</button> function tip(tip_value) { /*use here tip_value as you wish you can use if condition to check the value here*/ var totalBill = document.getElementById("bill").value; var totalTip = tip_value; var tip = totalBill * ("." + totalTip); document.getElementById("tip").innerHTML = "$" +tip; } 将 this.innerHTML 作为参数传递给您的小费函数。 所以你的小费函数应该是这样的： function tip(totalTip) { var totalBill = document.getElementById("bill").value; var tip = totalBill * ("." + totalTip); document.getElementById("tip").innerHTML = "$" +tip } 因此，如果您有一个如下所示的按钮元素： <button type="button" onclick="tip(this.innerHTML)">15</button> 提示函数将被称为 tip(15)。 我会写一个快速解决方案，然后解释为什么我这样做。 建议的解决方案 第 1 部分，HTML <div id="tip-wrapper"> <label for="bill">Total bill:</label> <input name="bill" id="bill" type="text"> <br/> <label for="tipratio">Tip ratio:</label> <button name="tipratio" value="15" type="button">15%</button> <button name="tipratio" value="18" type="button">18%</button> <button name="tipratio" value="20" type="button">20%</button> <div id="final-value">You owe...</div> </div> 第 2 部分，JavaScript var parent = document.getElementById('tip-wrapper'), buttons = parent.getElementsByTagName('button'), max = buttons.length, i; // function that handles stuff function calculate (e) { var bill = document.getElementById('bill'), tipRatio = e.target.value; document.getElementById('final-value').textContent = bill.value * (1+tipRatio/100); } // append event listeners to each button for(i = 0; i < max; i++) { buttons[i].addEventListener('click', calculate, true); } 说明 关于 HTML，并没有“太多”改变。唯一的事情是我使用的东西更符合标准。 我添加了一个 wrapper 元素，这只是为了隔离一些 DOM 遍历，而不是遍历整个文档对象来进行查找（这将加快您的脚本速度）。 您的按钮使用“值”属性，这是最好的。因为您可以以一种方式显示按钮文本，但使用正确的值（请参阅我添加了 % 字符）。 除此之外，我主要添加了适当的标识符和标签。 JavaScript，这是我将更详细地介绍的地方，我将逐步介绍： 您在脚本中要做的第一件事是设置您需要的变量（并获取您将使用的 DOM 元素。这就是我在前 4 行代码中所做的事情。 创建一个通用函数来处理您的计算并更新您的元素，无论其数值如何。我在这里使用的功能是向您的函数添加一个参数 (e)，因为 javascript 中的 EVENTS 将 EVENT OBJECT 附加到您的回调函数（在本例中为 calculate();）。 EVENT OBJECT 实际上有很多有用的属性，我使用其中的： target：这是触发事件的元素（即您的按钮之一） 我们所要做的就是获取目标值 (e.target.value) 并将其用于返回最终账单的数学中。 使用addEventListener。人们普遍认为应该将 JavaScript 保留在 HTML 之外，因此不鼓励使用旧的事件方法 (onclick="")。 addEventListener()方法并不太复杂，不做详细介绍，其工作原理如下： htmlObject.addEventListener('事件类型', '回调函数', '冒泡true/false'); 我所做的只是循环遍历所有按钮并附加事件 lsitener。 结束语 使用此脚本，您现在可以添加任何您想要的“按钮”，脚本会将它们全部考虑在内并进行相应调整。只要确保设置它们的“值”即可。 当我写这篇文章时，一些人给出了一些快速的答案。我还不能发表评论（声誉低），所以我会在这里留下我的评论。 一些建议的答案告诉您使用innerHTML来获取小费值。这是错误的，您正在使用表单字段，应该使用 element.value，这就是它的用途。 有些人甚至敢说使用 HTML5 data-* 属性。当然，你可以。但你为什么要这么做呢？ HTML 和 DOM 已经提供了完成任务所需的所有工具，而无需使用不必要的属性来污染 HTML。 value="" 属性旨在在表单中使用，它应该在字段值的 data-* 属性上使用。 一般来说，innerHTML旨在获取 HTML，而不一定是文本或值。还有其他方法可以获取您正在寻找的值。对于表单元素，它是 element.value，对于大多数其他 HTML 元素，它是 element.textContent。 希望这些解释有帮助 function tip(o) { var input = document.querySelector("input[id='bill']"); var total = input.value * o.innerHTML; document.querySelector("#tip").innerHTML = "$" + total; } Total Bill: <input id="bill" type="text"> <button type="button" onclick="tip(this)">15</button> <button type="button" onclick="tip(this)">18</button> <button type="button" onclick="tip(this)">20</button> <div id="tip">You owe...</div> 嘿我最近找到了解决这个问题的简单方法： 您可以将内部文本作为元素的 id 提供。在事件处理程序中，您可以通过以下方式访问内部文本： e.目标.id 希望这个解决方案可以帮助您:)