使用 InertiaJs 和 Laravel 从数据库中删除用户
我在从数据库中删除记录时遇到问题。我正在使用 InertiaJS 和 Laravel。 组件代码 以下是链接/按钮代码： 我在从数据库中删除记录时遇到问题。我正在使用 InertiaJS 和 Laravel。 组件代码 以下是链接/按钮代码： <Link class="trash" @click="submit(result.ChildID)"> Move to Trash </Link> 注意： ChildID 是数据库中子记录的 id。 现在：当用户单击此链接时，将调用一个方法，如下所示。 methods: { submit: function (ChildID) { alert(ChildID) if (confirm("Are you sure you want to delete this child?")) { this.$inertia.delete('destroy/ChildID'); } }, }, 路线代码 Route::delete('destroy/{childID}',[childrenController::class,'destroy']); 控制器代码 public function destroy(children $childID){ $childID->delete(); return redirect()->route('View_Child_Profile'); } 现在，当我点击删除按钮时，我收到以下错误： 试试这个。我认为你犯了错误“this.$inertia.delete('destroy/ChildID');” methods: { submit: function (ChildID) { alert(ChildID) if (confirm("Are you sure you want to delete this child?")) { this.$inertia.delete(`destroy/${ChildID}`); // or this.$inertia.delete('destroy/'+ChildID); } }, }, 这是我处理删除过程的方式。 前视+惯性： import { Link } from '@inertiajs/inertia-vue3'; 在模板中： <Link method="delete" :href="route('admin.insta_feeds.destroy',id)">Delete</Link> 后端 Laravel： 路线： Route::resource('insta_feeds', InstaFeedsController::class); 控制器功能： public function destroy(InstaFeed $insta_feed) { if(isset($insta_feed->image_path)){ Storage::delete($insta_feed->image_path); } $insta_feed->delete(); return Redirect::route('admin.insta_feeds.index'); }
我有一个基于站点管理员打开的票证的日历。我们有四种类型的门票： 待办的 进行中 完成的 取消 这是我有日历的 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>
我弄清楚了如何使用react-bootstrap来显示下拉列表： 我想出了如何使用react-bootstrap来显示下拉列表： <DropdownButton bsStyle="success" title="Choose" onSelect={this.handleSelect} > <MenuItem key="1">Action</MenuItem> <MenuItem key="2">Another action</MenuItem> <MenuItem key="3">Something else here</MenuItem> </DropdownButton> 但是我该如何编写 onSelect 的处理程序来捕获正在选择的选项呢？我尝试了这个，但不知道里面写什么： handleSelect: function () { // what am I suppose to write in there to get the value? }, 还有，有没有办法设置默认选择的选项？ onSelect函数传递所选值 <DropdownButton title='Dropdowna' onSelect={function(evt){console.log(evt)}}> <MenuItem eventKey='abc'>Dropdown link</MenuItem> <MenuItem eventKey={['a', 'b']}>Dropdown link</MenuItem> </DropdownButton> 在这种情况下，如果您选择第一个选项，则会打印“abc”，在第二个选项中您可以看到也可以传入一个对象。 所以在你的代码中 handleSelect: function (evt) { // what am I suppose to write in there to get the value? console.log(evt) }, 我不确定默认值是什么意思，因为这不是一个选择 - 按钮文本是标题属性中的任何内容。如果你想处理默认值，你可以在值为 null 时设置一个值。 您忘记提及 eventKey 作为第二个参数传递，这是获取您单击的值的正确形式： handleSelect: function (evt,evtKey) { // what am I suppose to write in there to get the value? console.log(evtKey) }, 您可能需要针对您的情况使用 FormControl >> 选择组件： <FormControl componentClass="select" placeholder="select"> <option value="select">select</option> <option value="other">...</option> </FormControl> 您应该按如下方式更改handleSelect签名（在组件类中）： handleSelect = (evtKey, evt) => { // Get the selectedIndex in the evtKey variable } 要设置默认值，您需要使用 title 上的 DropdownButton 属性 参考：https://react-bootstrap.github.io/components/dropdowns/
我有一个引导选项卡区域，并使用 Javascript 在选项卡之间切换。 javascript 被调用但不会更改选项卡。 $('#tabList b...</desc> <question vote="0"> <p>我有一个引导选项卡区域，并使用 Javascript 在选项卡之间切换。 javascript 被调用但不会更改选项卡。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script type="text/javascript"> $('#tabList button').click ( function (e) { e.preventDefault(); // bootstrap.Tab.getInstance(this).show() $(this).tab('show') } ); </script></code></pre> <pre><code><ul class="nav nav-tabs" id="tabList" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link" id="jobs-tab" data-bs-toggle="tab" data-bs-target="#jobs" type="button" role="tab" aria-controls="jobs" aria-selected="true">[tabHeaderJobs]</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link active" id="employees-tab" data-bs-toggle="tab" data-bs-target="#employees" type="button" role="tab" aria-controls="employees" aria-selected="false">[tabHeaderEmployees]</button> </li> </ul> <div class="tabContent" id="tabContent"> <div class="tab-pane fade" id="jobs" role="tabpanel" aria-labelledby="jobs-tab">[tabContentJobs]</div> <div class="tab-pane fade active show" id="employees" role="tabpanel" aria-labelledby="employees-tab">[tabContentEmployees]</div> </div></code></pre> </div> </div> <p></p> <p>´´´</p> <p>主选择器是 tabList 还是 tabContent ？</p> <p>那么我是否需要从按钮中选择切换名称，然后使用 <pre><code>($('#tabContent a[href="#toggleNameOfTab"]').tab('show')</code></pre> ？</p> </question> <answer tick="false" vote="0"> <p>根据您更新的代码，有几件事：</p> <ol> <li>无需选择<pre><code>#tabContent a</code></pre>。您的选项卡按钮已经具有 <pre><code>.nav-link</code></pre> 类，因此您可以将单击处理程序直接附加到这些按钮：</li> </ol> <pre><code>$('.nav-link').click(function() { $(this).tab('show'); }); </code></pre> <ol start="2"> <li>要以编程方式激活页面加载时的特定选项卡，您可以执行以下操作：</li> </ol> <pre><code>$('#employees-tab').tab('show'); </code></pre> <p>这将在加载时激活#employees-tab。</p> <p>需要了解的关键事项：</p> <ul> <li>使用 <pre><code>.nav-link</code></pre> 将点击处理程序附加到选项卡按钮</li> <li>使用 <pre><code>$(selector).tab('show')</code></pre> 以编程方式切换选项卡，其中 <pre><code>selector</code></pre> 是选项卡按钮的 ID 或元素</li> </ul> </answer> </body></html>
在 Rails 5 中单击浏览器上的后退按钮时，带有 Select2 的表单会重复
_header.html.erb（用于表单部分） <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> _header.html.erb（用于表单部分） <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> <div class="form-group" style="display:inline;"> <div class="input-group input-group-md"> <%= text_field_tag :q, params[:q], placeholder: ... ,class: 'form-control hideOverflow', type: "search" %> <%= select_tag "category", options_from_collection_for_select(...),include_blank: true, class: 'form-control hideOverflow', type: "search" %> <%if logged_in? %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', type: "search" %> <% else %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', include_blank: true, type: "search" %> <% end %> <span class="input-group-addon"><%= submit_tag "Search", class: "btn-transparent"%></span> </div> </div> <% end %> JS代码 <script> $( document ).on('turbolinks:load', function() { $('select#category').select2({ width: '60%', dropdownAutoWidth : true, placeholder: "Choose a category", maximumSelectionLength: 3 }); $('select#location').select2({ width: '40%', dropdownAutoWidth : true, minimumResultsForSearch: Infinity }); }); </script> 故障或渲染问题（单击链接查看图像） 有人可以帮我解决为什么吗？另外，我的搜索表单位于标题部分文件的导航栏中。 如果我去掉脚本中的 $(...).select ，一切都会正常...我认为 select.js 有问题 在此回复： https://stackoverflow.com/a/41915129/5758027 我在自己的代码中使用了这个解决方案： $(document).on('turbolinks:before-cache', function() { // this approach corrects the select 2 to be duplicated when clicking the back button. $('.select-select2').select2('destroy'); $('.select-search-select2').select2('destroy'); } ); 和观察者： $(document).ready( ready ); //... once document ready $(document).ajaxComplete( ready ); //... once ajax is complete $(document).on('turbolinks:load', ready ); //... once a link is clicked function ready() { $(".select-search-select2").select2({ theme: "bootstrap", language: 'es', allowClear: true }); $(".select-select2").select2({ theme: "bootstrap", language: 'es', minimumResultsForSearch: Infinity, allowClear: true }); }; 总是清除缓存不是会让使用 Turbolink 变得毫无意义吗？ 不如这样？ $(document).on('turbolinks:before-cache', function(e) { return $('.form-control.select2').each(function() { return $(this).select2('destroy'); }); }); 我无法解决这个渲染问题（仍在等待正确的答案！），但如果有人像我一样遇到类似的问题，请尝试跳出框框思考。这是我的技巧：我在应用程序中添加了一个后退按钮。 获取完整的url路径 # get the previous url def save_previous_page session[:return_to] = request.fullpath end 仅当页面不是主页或搜索页面时才显示后退按钮 <% if session[:return_to] != request.fullpath%> <%= link_to session.delete(:return_to) || request.fullpath, class: 'back-button' do%> <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <%end%> <% end %> 同时，我仍在等待并尝试解决渲染问题... 解决了问题 只需将此代码添加到您的 .js 文件中 Turbolinks.clearCache(); 这很可能是一些资源不一致，您应该检查您的 app\views\layouts 文件夹中是否有重复声明 wither jQuery、jQuery UJS 或 Turbolinks 的文件。检查页面的所有 <script> 标签，以及是否在 layout 文件夹和内部视图中声明相同的脚本。如果情况并非如此，请检查是否有 render、yield 或 build 呼叫 简单的解决方案，不要在您不希望它运行的东西上运行 select2 构建器。 $("select#category:not(.select2-container):not(.select2-hidden-accessible)").select2(); Rails 7 更新 这里的很多东西在 Rails 7 中都不起作用，尤其是 turbolinks:before-cache 事件。您正在寻找的新事件是 turbo:before-cache 和 turbo:load，所以它看起来像这样： $(document).on("turbo:before-cache", function() { $("#select_id").select2('destroy'); }); $(document).on('turbo:load', function() { $('#select_id').select2(); });
我决定通过创建挪威夏季的公路旅行地图来开始学习 Leaflet 和 JavaScript，这是我的项目的可重复示例： 我决定通过创建挪威夏季的公路旅行地图来开始学习 Leaflet 和 JavaScript，这是我的项目的可重复示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" /> <script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script> <style> body { margin: 0; } #map { width: 100%; height: 100vh; } .carousel { max-width: 300px; margin: 10px auto; } .carousel img { width: 100%; height: auto; } /* Custom styling for Geiranger popup content */ .geiranger-popup-content { max-width: 500px; padding: 20px; } </style> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([61.9241, 6.7527], 6); var streetViewMarker = null; // Variable to keep track of the Street View marker L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); var roadTripCoordinates = [ [59.9139, 10.7522], // Oslo [62.2622, 10.7654], // Tynset [62.5949, 9.6926], // Oppdal [63.0071, 7.2058], // Atlantic Road [62.1040, 7.2054] // Geiranger ]; // Function to initialize Slick Carousel for a specific marker function initSlickCarousel(markerId, images) { $(`#${markerId}_carousel`).slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, dots: true, arrows: true }); // Add images to the carousel images.forEach(img => { $(`#${markerId}_carousel`).slick('slickAdd', `<div><img src="${img}" alt="Image"></div>`); }); } // Add markers for each destination with additional information and multiple pictures var destinations = [ { coordinates: [59.9139, 10.7522], name: 'Oslo', info: "../07/2023 : Start of the road-trip", images: ['https://www.ecologie.gouv.fr/sites/default/files/styles/standard/public/Oslo%2C%20Norvege_AdobeStock_221885853.jpeg?itok=13d8oQbU', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.2622, 10.7654], name: 'Tynset', info: "../07/2023 : Fly-fishing spot 1", images: ['https://www.czechnymph.com/data/web/gallery/fisheries/norway/glommahein/Kvennan_Fly_Fishing_20.jpg', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.5949, 9.6926], name: 'Oppdal', info: "../07/2023 : Awesome van spot for the night", images: ['https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFRtpLlHWr8j6S2jNStnq6_Z9qBe0jWuFH8Q&usqp=CAU', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [63.0071, 7.2058], name: 'Atlantic Road', info: "../07/2023 : Fjord fishing", images: ['https://images.locationscout.net/2021/04/atlantic-ocean-road-norway.jpg?h=1100&q=83', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.1040, 7.2054], name: 'Geiranger', info: "../07/2023 : Hiking 1", images: ['https://www.fjordtours.com/media/10968/nicola_montaldo-instagram-26th-may-2021-0717-utc.jpeg?anchor=center&mode=crop&width=1120&height=1120&rnd=133209254300000000&slimmage=True', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] } ]; // Use Leaflet Routing Machine with Mapbox Routing plugin to get and display the route L.Routing.control({ waypoints: roadTripCoordinates.map(coord => L.latLng(coord[0], coord[1])), router: L.Routing.mapbox('MAP_BOX_KEY'), draggableWaypoints: false, addWaypoints: false, lineOptions: { styles: [{ color: 'brown', opacity: 0.7, weight: 2 }] } }).addTo(map); // Remove the leaflet-routing-container from the DOM var routingContainer = document.querySelector('.leaflet-routing-container'); if (routingContainer) { routingContainer.parentNode.removeChild(routingContainer); } destinations.forEach(function (destination) { var marker = L.marker(destination.coordinates).addTo(map); var markerId = destination.name.replace(' ', '_'); marker.bindPopup(` <b>${destination.name}</b><br> ${destination.info}<br> <div class="carousel" id="${markerId}_carousel"></div> `).on('popupopen', function () { // Initialize Slick Carousel when the marker popup is opened initSlickCarousel(markerId, destination.images); }).openPopup(); }); // Add Street View panorama on map click map.on('click', function (e) { if (streetViewMarker) { // Remove the existing Street View marker map.removeLayer(streetViewMarker); } let lat = e.latlng.lat.toPrecision(8); let lon = e.latlng.lng.toPrecision(8); streetViewMarker = L.marker([lat, lon]).addTo(map) .bindPopup(`<a href="http://maps.google.com/maps?q=&layer=c&cbll=${lat},${lon}&cbp=11,0,0,0,0" target="blank"><b> Cliquer ici pour avoir un aperçu de la zone ! </b></a>`).openPopup(); }); </script> </body> </html> 一切都按预期进行，我不得不说我对渲染非常满意。然而，通过查看 Stackoverflow 上的不同主题，我发现可以通过单击地图来显示 Google 街景视图。这个功能真的很酷，但我想限制仅在我的公路旅行行程中添加街景标记的选项。 有人可以帮我吗？ 您通过创建挪威夏季公路旅行地图开始了学习 Leaflet 和 JavaScript 的旅程，真是太棒了。到目前为止，您的项目设置看起来不错，我很乐意在您的进展过程中提供指导或帮助。 既然您已经包含了 Leaflet、Slick Carousel 和 Leaflet Routing Machine 库，看来您正计划使用 Slick Carousel 创建一个带有路线的交互式地图，也许还有一些附加功能。 以下是一些增强您的项目的建议： 地图初始化： 使用初始视图和要显示的任何特定标记或图层设置您的传单地图。 路由功能： 利用 Leaflet Routing Machine 将动态路线添加到您的地图。您可以自定义路线、添加航点并提供逐向指示。 照片轮播： 既然您提到了公路旅行地图，请考虑集成 Slick Carousel 来展示旅途中关键地点的照片或描述。这可以为您的地图添加视觉上吸引人的元素。 地图控制： 探索 Leaflet 插件或内置控件以增强用户体验。例如，您可以添加缩放控件或比例尺。 响应式设计： 确保您的地图能够响应不同的设备。 Leaflet 通常适合移动设备，但如果需要的话进行测试和调整是一个很好的做法。 数据层： 如果您有与您的公路旅行相关的特定数据点或事件，您可以使用标记或其他视觉元素在地图上表示它们。 JavaScript 交互性： 使用 JavaScript 为地图添加交互性。对于 ㅤ 实例，当用户单击标记时，您可以创建包含附加信息的弹出窗口。 记得迭代测试你的项目，并参考每个库的文档以获取详细的使用说明。 如果您有具体问题或在此过程中遇到挑战，请随时提问。祝您的公路旅行地图项目好运！
我有这段代码，我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象： </sc...</desc> <question vote="0"> <p>我有这段代码，我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> <head> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <title>Gauge Chart</title> </head> <button id='btn1'> Let's </button> <input id='slider1' type='range' value='34' min='0' max='100' step='.01'> <input id='slider2' type='range' value='89' min='0' max='100' step='.01'> <div id='chartid1' style='width:390px; height: 410px;'></div> <script> const chart1 = echarts.init(document.getElementById('chartid1')); function update1(value1, value2) { option = { series: [{ type: 'gauge', min: 0, max: 100, splitNumber: 10, detail: { fontFamily: 'Lato', fontSize: 14, borderWidth: 1, borderColor: '#020202', borderRadius: 5, width: 32, height: 20 }, data: [{ value: value1, name: 'False', itemStyle: { color: '#dd4b50' }, title: { offsetCenter: ['-20%', '20%'] }, detail: { offsetCenter: ['-20%', '36%'], backgroundColor: '#dd4b50', color: '#f2f2f2' } }, { value: value2, name: 'True', itemStyle: { color: '#3a9e4b' }, title: { offsetCenter: ['20%', '20%'] }, detail: { offsetCenter: ['20%', '36%'], color: '#f2f2f2', backgroundColor: '#3a9e4b' } } ] }] }; chart1.setOption(option); } function update2() { let value1 = Number($('#slider1').val()); let value2 = Number($("#slider2").val()); update1(value1, value2); } update2(); document.getElementById('btn1').addEventListener('click', function() { update2(); }) /// clickable chart1.on('mouseenter', {dataIndex:0}, function(params) { $(this).popover({ html: true, sanitize: false, title: 'Title ', content: 'This a text', trigger: 'hover', placement: 'top', container: 'body' }) }) </script></code></pre> </div> </div> <p></p> <p>我需要悬停并获得 .popover。我知道我可以使用 <pre><code>tooltip:{...}</code></pre>，但对于特定情况，我需要配置 .popover。我尝试用 <pre><code>mychart1.on(...</code></pre> 调整上面的代码，但没有成功。我添加了所有代码需求的CDN。</p> </question> <answer tick="false" vote="0"> <p>如果您查看 <a href="https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover" rel="nofollow noreferrer">文档</a>，该事件称为 <pre><code>mouseover</code></pre>，而不是 <pre><code>mouseenter</code></pre>。 <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5AOYCGAri1kwDRUUAthGjEADP2rpBbAB7EAjGIkD0GEABsIYAHIdBAI1yKVU2ABMsYNhA3FUZ9ADMYYAGJthG2swAybMGA-VQoXaDAAZQgAL0ZYBQAWSUcDYBxLHAB1CHMwAAtFZLNU9NwAYWANNOYAYjEAJgaG4MdYEoyAJTZzCA4iWABWIqkAdxz84gBmeuHqPKwIFjywYkaQgF9ZiwC2YjJWh1bYADc2DQ44yaSQ6mhPOKYPDWwWo-0sQQi6DTjDo9gAMaVaqwJg1czmBIGAZiJg3CibeHoSBgH72JEUYBOJzYMBlLDhYykJgAWkaAFI-KCKUwALoYxH_SzWWzo_7oLE4qz4wk4Pakmm8UGTABslNpW2KbABAGsWDhgBxoOYKlU-aDwZDobDJVIgWrak56kajXD_ut4YzHH9HKdznEABwATl16DuggeABUcBdXq13p9vr8Meh9SCwZM2E6sFCzUcra0UWjKOzYJzcTywESSExBdSxOKGa6LFYbHYU-z09yCVn1Tm80xReLi6HgeqwSbjfU_UcDNK5QqlSq27VI9HYwzLSF6dQLeh6esANwoFeCWhlPJsHBgAB0MAAFExBIrsMBjrgqUhzDsAJLKrDyWBiTawJxKgGQA8gLeeDAASgrIFoAwSosB3KoWH3b8cF_P9l3WOCgA" rel="nofollow noreferrer">这里</a>是你的例子：</p> <pre><code>option = { series: [ { type: 'gauge', min: 0, max: 100, splitNumber: 10, detail: { fontFamily: 'Lato', fontSize: 14, borderWidth: 1, borderColor: '#020202', borderRadius: 5, width: 32, height: 20 }, data: [ { value: 34, name: 'False', itemStyle: { color: '#dd4b50' }, title: { offsetCenter: ['-20%', '20%'] }, detail: { offsetCenter: ['-20%', '36%'], backgroundColor: '#dd4b50', color: '#f2f2f2' } }, { value: 89, name: 'True', itemStyle: { color: '#3a9e4b' }, title: { offsetCenter: ['20%', '20%'] }, detail: { offsetCenter: ['20%', '36%'], color: '#f2f2f2', backgroundColor: '#3a9e4b' } } ] } ] }; myChart.on('mouseover', {dataIndex: 0}, function(params) { console.log(params); }); </code></pre> </answer> </body></html>
问题是如何在选项的一部分上应用样式。 我有一个像这样的选择： 项目 1 问题是如何在选项的一部分上应用样式。 我有一个像这样的选择： <select id="my_select"> <option value="1">Item 1 <span class="color-red">20 calls</span></option> <option value="2">Item 2 <span class="color-red">10 calls</span></option> <option value="2">Item 3 <span class="color-red">30 calls</span></option> </select> 浏览器不允许在 OPTION 中使用标签并删除它们。 因此，一个可能的解决方法是使用 HTML 实体： <select id="my_select"> <option value="1">Item 1 <span class="color-red">20 calls</span></option> <option value="2">Item 2 <span class="color-red">10 calls</span></option> <option value="2">Item 3 <span class="color-red">30 calls</span></option> </select> 现在浏览器将每个选项的全部内容视为文本。这是 Jquery 代码： $('#my_select').select2({ minimumResultsForSearch: -1 }); 我偶然发现的最后一件事是在渲染 Select2 和下拉菜单后分别用“<" and ">”符号替换实体“<”和“">”，以默认黑色进入第一个选项框“Item 1”， “20 次通话”为红色（CSS 可用：.color-red {color:red;}）。其他选项框也是如此。 我试图在文档中找到答案，但没有任何效果。例如， $('#my_select').select2({ minimumResultsForSearch: -1, templateResult: function (item) { item.text.replace (/>/g,'>').replace (/</g,'<'); } }); 非常感谢任何有关如何解决此问题的想法。 您需要重写 escapeMarkup 选项以允许 HTML 内容。 在templateResult中，您告知要如何以及以何种方式呈现内容，在本例中，我在每个选项中使用数据文本属性的返回。 $('#my_select').select2({ minimumResultsForSearch: -1, escapeMarkup: function(item) { return item; }, templateResult: function(item) { return $(item.element).data('text'); } }); .color-red { color: #ff0000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> <select id="my_select" style="width: 100%;"> <option></option> <option value="1" data-text='Item 1 <span class="color-red">20 calls</span>'>Item 1 20 calls</option> <option value="2" data-text='Item 2 <span class="color-red">10 calls</span>'>Item 2 10 calls</option> <option value="3" data-text='Item 3 <span class="color-red">30 calls</span>'>Item 3 30 calls</option> </select>
我需要将 std::function 作为 void 指针传递以异步执行，因此我在堆上创建了一个 std::function 。删除函数体内的 std::function 对象是否安全？请看...
您正在开发一个Azure Function App。您使用 Azure Function App 主机不支持的语言开发代码。代码语言支持 HTTP 原语。 您必须部署...
在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题
我有一个像这样的简单组件。 从'react'导入React，{useState}； 函数 MyComponentWithState(props) { const [值，setValue] = useState(0); 返回 （ 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此，为此我准备了 package.json 和 webpack.config.js，如下所示。 package.json： { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json： const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时，这些配置就像魅力一样，但我的观点是本地测试！ 我想在发布之前测试这个组件/库。为此，我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的，我的组件是功能性的，我也使用了钩子。因此，当我将本地链接的库注入到我的主 ReactJs 项目中时，会遇到此错误， 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次，我的组件也会导入 React！我的意思是在一个项目中两次 React 导入！. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题？我的错误在哪里？ 更新： 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的，但没有成功！意思是，我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js： import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json： { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改，npm link在我的ReactJS（Hooks）项目中真正发挥了作用。 请注意，这只是一个简单的 Rollup 配置来展示我的解决方案，您可以在配置中添加多种内容，例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分（而不是 react-native）内设置 peerDependencies 和 dependencies 包。另外，对于本地开发（当您的包未包含在任何其他 React 项目中并且您想在本地运行它时），您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能，当使用 npm link 时，请使用主应用程序项目和组件项目中的 react。 因此，在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案：https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言，我开发了一些 UI 组件作为包，其中有一个包含 React 应用程序的示例文件夹，用于创建 React 应用程序。 问题是，当我使用 npm i ../ 将包安装到示例应用程序中时，它会将包中的所有文件安装到示例应用程序中，包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项，示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。
我的post方法如下图： $(".buttons").click(function(){ var gettopic=$.post("topic.php", {id: topicId}, function(result){ // 处理返回结果的代码 }); }) 我尝试...
带有使用 requireJS 的 javascript 模块的 Flutter Web 项目（Flutter Web 中的 Monaco 编辑器）
我正在尝试在 Flutter Web 中使用 Monaco 编辑器。 我看到的最简单的方法是同步加载所有资源示例。 这是一个独立的 html 文件： 我正在尝试在 Flutter Web 中使用 Monaco 编辑器。 我看到的最简单的方法是同步加载所有资源示例。 这是一个独立的 html 文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.css" /> <style> @font-face { font-family: "codicon", src: url("https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/base/browser/ui/codicons/codicon.ttf") format("truetype") } </style> <title>Monaco</title> </head> <body> <h2>Monaco Editor Sync Loading Sample</h2> <div id="code" style="width: 800px; height: 600px; border: 1px solid grey"></div> <script> var require = { paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs" } }; </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/loader.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.nls.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs/editor/editor.main.js"></script> <script> var editor = monaco.editor.create(document.getElementById("code"), { value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'), language: "javascript", additionalCssClassName: "code" }); </script> </body> </html> 我的问题是：如何修改示例 Flutter Web 项目的 index.html 文件，以便加载所有必需的资源？线路好像有问题 var require = { paths: { vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs" } }; 因为 flutter 构建永远不会完成（卡在某个地方。）我看到 Flutter 本身使用 requirejs，并且可能存在我不知道如何解决的冲突。 如果您知道如何执行此操作，请发布一个 Fluter Web index.html 文件，该文件加载编辑器所需的所有 js 文件。 谢谢你， T https://github.com/Hua777/flutter_monaco_editor 我已经大致完成了flutter版的monaco编辑器。 但还不完美，希望对你有帮助。
NodeJS 我当前的 Google Cloud 函数名称是什么？
我想使用当前Google Cloud Function的名称来驱动一些逻辑。如何确定我的 Google Cloud Function 名称是什么？
我正在使用 Next JS 12.2.0。我有如下链接标签， {帖子标题} 问题是某些 href 结尾有
Azure Function Python V2 一个函数应用程序中的多个函数
我正在寻找有关在一个 Azure Function App 中为多个函数创建项目结构的指导。这是我之前读过的一篇文章 在一个 Azure Function App 中创建多个函数 有一个...
使用 Azure Function 运行时和 pytest 'ModuleNotFoundError：没有名为...的模块'时出现导入问题
我的项目结构如下所示： 回购/ |--模型/api |--function/function_app.py |--函数/工具.py |--函数/__init__.py |--测试/test_function_app.py ...
Alpine.js xcollapse 不适用于 laravel 组件和 p 标签
如果我使用p标签和组件，折叠总是打开的 ` 如果我使用 p 标签和组件，折叠始终是打开的 ` <div x-data="{ expanded: false }"> <x-nav-link @click="expanded = ! expanded" :href="'#'" :active="false">{{ __('Collapse') }}</x-nav-link> // This is not working <p x-show="expanded" x-collapse> <x-nav-link :href="'/'" :active="false" :sub="true">{{ __('Sub') }}</x-nav-link> </p> // This is working <div x-show="expanded" x-collapse> <x-nav-link :href="'/'" :active="false" :sub="true">{{ __('Sub') }}</x-nav-link> </div> </div> 控制台没有显示任何错误 在您的示例中， 标签包含一个肯定会由 标签（或其他一些块标签）分隔的组件 当浏览器遇到 标签内的 block 标签时，会自动将其关闭，这样组件就会位于 标签之外，不会受到 x-show="expanded" 的影响。 您可以使用浏览器控制台来解决这个问题（我使用 而不是您的组件进行测试）： 通常浏览器还会尝试通过添加新的内容来修复问题 标签匹配将保持孤立状态的结束标签 解决方案可能是将组件插入非块类型标签中。否则必须更换 <\p> 标签。 这里有一些对标签的参考
link rel=preload 可以与 fetch 一起使用吗？
我有一个大的 JSON blob，我想在我的网页中预加载。为此，我已将 添加到我的页面。我还有一个 JS 请求要 fe...
我有一个像这样的应用程序组件： 常量应用程序 = () => { 返回 （ 我有一个像这样的应用程序组件： const App = () => { return ( <Router> <Route exact path='/' component={Landing} /> <Route path='/login' component={Login} /> </Router> ) } 每个组件都有自己的目录和样式表。我的文件夹结构是这样的： src | | Landing| | | | Landing.js | Landing.module.css | | Login| | | | Login.js | Login.module.css | app.js index.js 我的问题是Login和Landing组件的样式表相互冲突，并且Landing页面看起来不太好。例如，登录的背景颜色适用于登陆页面，但我不希望这样。 我只在每个组件中导入 CSS 文件，如下所示： import styles from './Landing.module.css' 这是我如何使用样式变量的示例： return ( <div className={styles.navBar}> <Link to="/"> <img className={styles.logo} src="https://image.flaticon.com/icons/png/512/2039/2039175.png" /> </Link> {loggedIn && <div> <button onClick={logout}>log out</button> <Link className={styles.navItem} to="/users">get users</Link> </div> } {!loggedIn && <div> <Link className={styles.navItem} to="/login">log in</Link> <Link className={styles.navItem, styles.btn} to="/signup">signup</Link> </div> } </div> ) 即使它很旧，我也会回答谁在后面：发生这种情况的原因是你的CSS选择器很可能具有相同的特异性，因此是外观的顺序决定了应用哪种样式。 文件夹结构中的 Login 位于 Landing 之后，因此您的捆绑程序将使 Login 的样式出现在捆绑的 CSS 中的最后，然后它将覆盖 Landing 的样式。 这个问题有很多解决方案： 您可以增加您想要赢得的选择器的特异性（例如，通过在 CSS 文件中重复两次该类） 您可以降低想要丢失的选择器的特异性（例如使用 :where()） 如果您同意支持哪些浏览器（例如@layer），现在您可以使用级联层 等等...
我在 Azure 云中有一个 Azure Function 和一个 PostreSQL DB。 我想从我的 Azure 函数访问连接字符串，我们将其称为 IT-PostgreSQL。 这是我的Azure功能： 命名空间
无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact | Enba Camping</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="style/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <!-- NAV --> <div class="container-fluid"> <div class="row"> <div class="col-sm-12 p-0"> <nav class="navbar navbar-expand-lg bg-body-tertiary p-0 "> <div class="container-fluid bg-dark "> <a class="navbar-brand text-light mb-2" href="index.html">Enba Camping</a> <button class="navbar-toggler btn btn-light btn btn-outline-light bg-light m-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon "></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link text-light text-center" aria-current="page" href="index.html">Home</a> <a class="nav-link text-light text-center" href="aboutus.html">About us</a> <a class="nav-link active text-light text-center" href="contact.html" aria-disabled="true">Contact</a> </div> </div> </div> </nav> </div> </div> </div> <!-- NAV END --> <!-- ABOUT US --> <div class="container-fluid p-0 bg-dark text-light"> <div class="row"> <div class="col-sm-6 ps-0"> <img src="images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg" alt="" class=" d-block w-100 c-img "> </div> <div class="col-sm-6 d-flex justify-content-center align-items-center "> <div class="text-center"> <h2 class="fw-bold display-4 ">Bize Ulaşın</h2> <!-- ABOUT US --> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Adınız</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Name"> </div> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Email Adres</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email Address"> </div> <div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Mesajınız</label> <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message" rows="3"></textarea> </div> <div class=" gap-2 d-md-block "> <button class="btn btn-light " type="button">Send</button> </div> </div> </div> </div> </div> <!-- ABOUT US END --> <!-- PRODUCT --> <div class="container mt-sm-5"> <div class="row text-center "> <h1 class="d-flex justify-content-center">Mekanlarımız</h1> <hr> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Karavan Parkı</h5> <p class="card-text">Ormanın içinde konumlanan karavan parkımız, tam anlamıyla bir doğa kaçamağı sunuyor. Ormanın huzurlu atmosferinde kendinizi kaybedin. Karavanınızla konforlu bir konaklama deneyimi yaşayın.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız </a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card3.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Orman İçi Çadırlı Kamp</h5> <p class="card-text">Orman içi çadırlı kamp alanımız, doğa severler için bir cennet. Gölgeli ağaçlar arasında konumlanan çadırlarımızda, kuş cıvıltıları ve huzur içinde bir konaklama deneyimi sizi bekliyor.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> <div class="col-sm-4 mb-2"> <div class="card"> <img src="images/card1.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Dağ Evi </h5> <p class="card-text">Dağ evimiz, şehrin gürültüsünden uzak,huzurlu bir konaklama imkanı sunuyor. Ferah odalarımızda dağ manzarasının keyfini çıkarabilir, gölet kenarındaki aktivitelerle vakit geçirebilirsiniz.</p> <a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a> </div> </div> </div> </div> </div> <!-- PRODUCT END --> <!-- PROJECT --> <div class="row my-4"> <div class="col-sm-12"> <h1 class="d-flex justify-content-center">Galeri</h1> <hr> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/hichem-meghachou-7I-Rj_E9ihI-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/jimmy-conover-J_XuXX9m0KM-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/josh-campbell-UbbjVyibFuc-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/shelby-cohron-ESNV6KmLJMg-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/tegan-mierle-fDostElVhN8-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> <div class="col-sm col-6 mb-1"><img src="images/galeri/toa-heftiba-x9I-6yoXrXE-unsplash.jpg" alt="" class="w-100 img-thumbnail"> </div> </div> <!-- PROJECT END --> <!-- FOOTER --> <div class="bg-dark text-light"> <div class="container"> <footer class="pt-5 mt-5 "> <div class="row "> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column "> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a> </li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a> </li> </ul> </div> <div class="col-md-5 offset-md-1 mb-3"> <form> <h4> Abone Ol ve Doğanın Güzelliklerini Kaçırma!</h4> <p class="fs-6">Doğanın kucaklayıcı atmosferine adım atmak, huzurla dolu anlar yaşamak ve Enba Camping'in sunduğu özel fırsatları kaçırmamak için hemen abone ol! Sitemize abone olarak, doğanın gizemli güzellikleri, özel indirimler ve etkinliklerden ilk sen haberdar olacaksın.</p> <p class="fs-6"> Unutulmaz anılar biriktirmek ve doğanın kollarında huzurlu bir deneyim yaşamak için abone ol, Enba Camping'in eşsiz dünyasına adımını at! 🏕️✨ </p> <div class="d-flex flex-column flex-sm-row w-100 gap-2"> <label for="newsletter1" class="visually-hidden">Email address</label> <input id="newsletter1" type="text" class="form-control" placeholder="Email address"> <button class="btn btn-primary" type="button">Subscribe</button> </div> </form> </div> </div> <div class="d-flex flex-column flex-sm-row justify-content-between border-top"> <p>© 2023 Company, Inc. All rights reserved.</p> <ul class="list-unstyled d-flex"> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#twitter"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#instagram"></use> </svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"> <use xlink:href="#facebook"></use> </svg></a></li> </ul> </div> </footer> </div> </div> <!-- FOOTER END --> </body> </html> 和CSS .jumb { vertical-align: inherit; } p { font-size: 24px; } .c-item { height: 480px; } .c-img { height: 100%; object-fit: cover; filter:brightness(0.9) } 这里。我不希望页面左右移动。我想让它适合全屏，但容器结构溢出了 请将这段代码添加到您的 CSS 文件中。然后，它就会起作用。 .row{ margin-right: 0px; }
我想在div滚动到视口时启动一个函数。我的问题是，每次我继续滚动时，该功能都会再次触发/启动。 HTML： <... 我想在 div 滚动到视口中时启动一个函数。我的问题是，每次我继续滚动时，该功能都会再次触发/启动。 HTML： <div class="box"></div> JS： $(document).ready(function() { function start() { alert("hello"); } $(window).scroll(function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } }); }); 总结一下：当div滚动到视口中时，应该启动“start”函数。但触发一次后就不能再触发了。 小提琴 您可以设置一个标志，例如： var started = false; function start() { if(!started) { alert("hello"); } started = true; } 演示 $(document).ready(function() { var started = 0; function start() { if(started==0) { alert("Alert only once"); } started = 1; } $(window).scroll(function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } }); }); *{margin:0;} .box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; } .green { background: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <br /> <center> <br /> <h1>scroll down</h1> </center> <div class="box"></div> 有很多方法可以解决这个问题。您可以删除事件侦听器（因为您使用的是 jQuery，所以我将使用 on 和 off 方法）： $(window).on('scroll', function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } $(window).off('scroll'); }); 如果你希望窗口滚动方法在启动方法满足要求后停止..你可以这样做 $(document).ready(function() { var toggleScroll = false; function start() { alert("hello"); } $(window).one("scroll", checkToggleScroll); function checkToggleScroll(){ if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); toggleScroll = true; start(); } else { $(".box").removeClass("green"); } if(!toggleScroll){ $(window).one("scroll", checkToggleScroll); } } }); 当start()没有类$(".box)（在一定量的滚动后添加）时，只需运行"green"函数。 $(document).ready(function() { function start() { alert("hello"); } $(window).scroll(function() { if ($(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { if (!$(".box").hasClass("green")) { $(".box").addClass("green"); start(); } } else { $(".box").removeClass("green"); } }); }); .box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; } .green { background: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"></div>
Azure Function App 无法启动 Docker 容器，原因是“Azure.RequestFailedException：指定的资源名称包含无效字符。”
我们有一个从 Docker 映像部署的 Azure Function 应用程序。 该函数正在运行 .NET 8.0，FUNCTIONS_EXTENSION_VERSION = ~4 且 FUNCTIONS_WORKER_RUNTIME = dotnet-isolated。 该应用程序包含...
了解 std::function 的开销并捕获同步 lambda
考虑以下简单示例： #包括 #包括 #包括 #包括 #包括 #包括...
我正在尝试模拟google+按钮。在LINK的部分代码中，它将会话ID转换为某种哈希值。我发现会话ID名称是SAPISID，转换后的哈希名称是SAPISIDH...
新的 Azure Function App 处理已由另一个 Function App 处理过的 Blob
我有以下情况。我有一个在 Windows 应用服务计划上运行的功能。该函数处理 blob。该函数具有默认的 LogsAndContainerScan 触发器。现在过了一段时间我...
如何解决 Firebase Cloud Function 未在 SSR 的“/workspace/.next”中找到 Next.js 生产版本？
我之前问过这个问题，并且仍在为这个问题苦苦挣扎；谁能帮我解决这个问题： SSR Next.js 应用程序的 Firebase Cloud Function 未在...中找到生产版本
.navbar { 背景颜色：#F91F46； } .src-bar { 边框：0； 边框半径：5px； 概要：无； 左内边距：15px； 宽度：30vw； } .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="img/Logo.avif" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <div class="justify-content-end"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </div> </nav> 切换时，我希望折叠 div 居中。我知道原因 - 我将折叠和切换 btn 放在 justify-end div 内，因为我需要切换 btn 位置位于右侧。现在，当切换时，我的折叠位于右侧，但我希望在切换时，折叠div到中心。 当我删除 justify-end div 时，它位于左侧，但如果删除它，每个导航元素都会移动到 nav 和 md 视图中 lg 的左侧。 看起来像这样或中心 我们确实需要将 .nav-collapse 移到 justify-end 元素之外，才能在较窄的视口上获得所需的布局。 要将菜单显示在右侧，请通过 flex-grow: 1 类将 .nav-collapse 应用于 flex-grow: 0 元素，覆盖 flex-grow-0 上的默认 .nav-collapse。 为了使窄视口的链接元素居中，.navbar-nav中的元素采用垂直柔性布局，因此我们可以通过align-items: center类应用align-items-center： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> 您还可以考虑通过 text-align: center 类应用 text-center，将链接元素 text 居中： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav>
分页时如何从 Okta 的 API List Users 中的响应标头获取 Next Link？
我正在尝试为其 API 端点列表用户实现 Okta 的分页。看起来为了分页，必须通过响应中的传入标头获取下一个链接。当执行...
node.js https 示例，错误，连接到本地主机的未知 SSL 协议错误
我使用这些链接中的简单示例： a 链接[a 如何在 Node.js 中创建 HTTPS 服务器？] a link[a 如何创建 https 服务器？ docs.nodejitsu.com] 但我收到类似的错误 卷曲：(35) 未知 SSL
./app 中的两个文件 ui.R 图书馆（闪亮） 一个<- 1 ui <- fluidPage( textOutput("test") ) server.R server <- function(input, output) { output$test <- renderText({ a ...
在 yocto 项目中集成我的 cmakelists 包时没有这样的文件或目录
我可以在 ubuntu 22.04 上使用 CMakeLists 成功编译并运行这个 gstreamer 插件：LINK 现在，我正在尝试将此包集成到我的 Yocto 项目中。所以我写了这个bb食谱： 摘要=&...
如果需要很长时间，如何在Javascript中设置稍后执行的函数？
函数等待() { 让 a = Date.now() while (Date.now() - 一个 < 3000) { //loop } console.log('waiting ends...') } function start(){ console.log('starts...') wait() }
我想使用购物车转换创建扩展包。首先，我复制了“input.grqphql”和“index.ts”，如下所示：[PR (https://github.com/Shopify/function-examples/pull/276)] 之后，我...
希腊字母被替换为???一旦我使用 PHPWord 将 docx 转换为 pdf？
我做了以下简单的 laravel artisan 命令： Artisan::command('测试:pdf',function(){ \PhpOffice\PhpWord\Settings::setPdfRendererName(\PhpOffice\PhpWord\Settings::PDF_RENDERER_DOMPDF); ...
H。我需要通过ajax发送csv文件。我写了这段代码 $('#send-csv').click(function(){ var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("c...
如何在razor页面ASP.Net Core 8中的“a”标签后添加逗号
我试图在 foreach 中的“a”标签后面添加逗号（，），如下所示： @foreach（Model.Product.Categories 中的 var 项目） { 我试图在 foreach 中的“a”标签后面添加逗号（，），如下所示： @foreach (var item in Model.Product.Categories) { <a href="#" class="product-link product-cat-title">@item.Name</a> , } 但我收到错误消息“} Expected”。我该怎么办？ 我已经测试了@string.join(", ", Model.Categories.Select(p => p.Name).ToArray())，但这将返回字符串或文本。我要链接！ 值得一提的是，我不想添加其他标签，例如 <span> 或 <a>。我知道他们有效。如果有人能解释为什么它不起作用，我将不胜感激？ 谢谢 @foreach (var item in Model.Product.Categories) { <a href="#" class="product-link product-cat-title">@item.Name</a> <a >,</a> }
Javascript 私有方法：函数表达式与函数声明[重复]
在 JavaScript 中创建（某种）私有方法的常见方法是： 类=函数（arg0，arg1）{ var private_member = 0; var privateMethod = function () { 返回
我希望能够访问模块的所有导出，而不必说模块。出口前。 假设我有一个模块： // mymod.js module.exports.foo = function() { 控制台.log(...
这个问题已经在另一个平台上问过了，但我还没有得到答案。 https://discourse.julialang.org/t/generalizing-the-inputs-of-the-nlsolve-function-in-julia/ 延长一段时间后...
有件事我无法理解： 我有一个打开同一页面的功能，但具有不同的内容，具体取决于菜单中单击的按钮： 有件事我无法理解： 我有一个打开同一页面的功能<div id="page">但具有不同的内容，具体取决于菜单中单击的按钮： <nav> <button onclick="openPage(1)">PAGE 1</button> <button onclick="openPage(2)">PAGE 2</button> <button onclick="openPage(3)">PAGE 3</button> </nav> 然后是函数： function openPage(p){ var move=0; // define a var for USER action if(p==1){ document.getElementById('page').innerHTML = text_1; // content preloaded } else if(p==2){ document.getElementById('page').innerHTML = text_2; } else if(p==3){ document.getElementById('page').innerHTML = text_3; } // then on the top of the page (absolute + z-index) I add a HTML object: document.getElementById('page').innerHTML += '<aside id="pictures">content</aside>'; // what I'm now trying to do is to remove this object once USER move its mouse on it document.getElementById('pictures').addEventListener("mousemove",function(event) { setTimeout(function(){ move+=1; // increase the val each second },1e3) console.log('move'+p+' = '+move) // control value if(move>100){ document.getElementById('pictures').style.display = "none"; // OK, it works move=0; // reinit the var } }); } 现在惊喜： 第 1 页的控制台 move1 = 0 move1 = 1 ... move1 = 99 move1 = 100 // 'pictures' disappears 第 2 页的控制台 move1 = 41 move2 = 0 ... move1 = 58 move1 = 17 ... move1 = 100 // 'pictures' disappears move2 = 59 第 3 页的控制台 move1 = 15 move2 = 88 move3 = 0 ... move1 = 37 move2 = 100 // 'pictures' disappears move3 = 12 ... 我的 var 'move' 同时获得 3 个值...这怎么可能？ 您的问题的原因是您每次调用 openPage 函数时都会添加一个事件侦听器。这意味着，如果您单击多个按钮，每个按钮都会有自己的事件侦听器附加到 #pictures 元素。现在，当触发 mousemove 事件时，所有这些侦听器将同时执行，导致 move 变量每秒递增多次。 解决此问题的方法是在添加新事件侦听器之前先删除现有的事件侦听器。 let handler; // to hold the event listener function const pictureEl = document.getElementById('pictures'); function openPage(p){ // Remove existing event listener if (handler) { // <-- Check here pictureEl.removeEventListener("mousemove", handler); } handler = function(event) { // ...Rest } }; // Add new event listener pictureEl.addEventListener("mousemove", handler); // ...rest 找到了另一种（最简单的？）方法： var move=0; // placed out of functions function openPage(p){ .... (same as previous) getElementById('pictures').addEventListener("mousemove",outPicts); // change } // put mousemove event in another function: function outPicts(p){ setTimeout(function(){ move+=1; },1e3) console.log('move = '+move) if(move>100){ document.getElementById('pictures').style.display = "none"; // then remove event getElementById('pictures').removeEventListener("mousemove",outPicts); move=0; // reinit the var } } 按预期工作
我尝试在ajax中发送表单而不重新加载页面，但我看到，文件上的链接不存在...... 我有下一个表格： 我尝试在ajax中发送表单而不重新加载页面，但我看到，文件上的链接不存在... 我有下一个表格： <form id="settings" method="POST" enctype="multipart/form-data"> ... <input type="file" id="logo" style="display:none;" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">save</button> </form> Ajax 脚本： $('#settings').submit(function(e){ e.preventDefault(); var form = $(this).serialize(); alert(form); // file is not attached... $.ajax({ url : '/settings', type : 'POST', crossDomain : false, data : form, contentType : 'multipart/form-data', dataType : 'json', progressData: false, cache : false, success : function(r){ alert (111); } }).fail(function(){ console.log('Error occured!'); }); }); 在服务器端，我收到错误： org.apache.tomcat.util.http.fileupload.FileUploadException：请求被拒绝，因为未找到多部分边界 我尝试不序列化表单，而是写了 data : form -> data : new FormData(this) 此选项会导致错误“非法调用”。如何在不重新加载页面的情况下发送带有文件的表单？ 要使用 AJAX 发送带有文件的表单而不重新加载页面，您需要使用 FormData 来正确处理文件上传。 <form id="settings" method="POST" enctype="multipart/form-data"> <!-- Other form fields --> <input type="file" id="logo" name="logo" accept="image/png, image/jpeg, image/gif"> <button type="submit" id="send" class="btn btn-primary">Save</button> </form> $(document).ready(function() { $('#settings').submit(function(e){ e.preventDefault(); var formData = new FormData(this); $.ajax({ url: '/settings', type: 'POST', data: formData, contentType: false, processData: false, cache: false, success: function(response){ alert('Form submitted successfully!'); // Handle the response from the server }, error: function(){ console.log('Error occurred!'); } }); }); });
“拒绝应用 {link} 中的样式，因为其 MIME 类型不受支持且启用了严格的 MIME 检查。”在 Vue+Vuetify 应用程序中
我使用 vue-create-app 创建了一个 Vue+Vuetify 项目。在我的本地系统中，Vuetify 工作正常，但在 Gitlab 实时服务器上不起作用。并在实时应用程序中显示此错误消息： “拒绝应用...
我有一个按钮可以下载带有文件名的文件。为此，我写了这样的内容： 我有一个按钮可以下载带有文件名的文件。为此，我写了这个： <Button color='primary' href=`/apiproxy/objects/${id}/subobjects` LinkComponent={React.forwardRef((props, ref) => <Link {...props} type='text/csv' download={`object_${id}_subobjects.csv`} ref={ref} />)} /> 生成的按钮看起来与其他没有 href 属性的按钮相同（也带有 color='primary'），但悬停时其文本颜色变为蓝色，与其他按钮不同，它保持白色。 如何使其样式与其他按钮相同？我可以将 &:hover 文本颜色指定为白色，但是当主题更改其他按钮的文本颜色时，这会中断。 有没有办法更改链接组件，使其样式与其他按钮相同，或者如果没有，按钮在调色板中使用什么作为悬停文本颜色，以便我可以将其设置为该颜色？ 我认为你可以在 Link 组件中使用 sx 属性。就像下面... <Button color="primary" href="/apiproxy/objects/1/subobjects" LinkComponent={React.forwardRef((props, ref) => ( <Link {...props} type="text/csv" download={"object_1_subobjects.csv"} ref={ref} sx={{ "&:hover": { color: "white", }, }} /> ))} />
为什么将operator()作为std::function调用不起作用
考虑这个旨在收集字符串序列的小类： 班级问题_t期末 { 私人的： std::vector m_issues; 民众： constexpr void 运算符()(std::string&a...
当我点击问号时，按钮父级有点击效果（这里是蓝色） 是否可以禁用它？ 当我点击问号时，按钮父级有点击效果（这里是蓝色） 可以禁用它吗？ <h:commandLink styleClass="btn btn-primary btn-lg" style="width: 100%;"> <span class="fa fa-trash"/> <span id="spanQuestion" class="fa fa-question" data-content="Help" data-html="true" data-popover="true"/> </h:commandLink> const span = $('#spanQuestion'); span.on("click", function(e) { e.stopPropagation(); }); 我试图停止对父项的点击，添加背景颜色。 我希望父按钮不会有点击效果。 ` 常量按钮 = $('#myButton'); const span = $('#spanQuestion'); span.on("click", function (e) { e.stopPropagation(); }); button.on("click", function (e) { // Your button click logic here }); `
Laravel POST 方法返回状态：405 不允许在 POST 方法上使用方法
请查找以下信息： NoteController.php 请查找以下信息： NoteController.php <?php namespace App\Http\Controllers; use App\Http\Requests\NoteRequest; use App\Models\Note; use Illuminate\Http\JsonResponse; class NoteController extends Controller { public function index():JsonResponse { $notes = Note::all(); return response()->json($notes, 200); } public function store(NoteRequest $request):JsonResponse { $note = Note::create( $request->all() ); return response()->json([ 'success' => true, 'data' => $note ], 201); } public function show($id):JsonResponse { $note = Note::find($id); return response()->json($note, 200); } public function update(NoteRequest $request, $id):JsonResponse { $note = Note::find($id); $note->update($request->all()); return response()->json([ 'success' => true, 'data' => $note, ], 200); } public function destroy($id):JsonResponse { Note::find($id)->delete(); return response()->json([ 'success' => true ], 200); } } NoteRequest.php <?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class NoteRequest extends FormRequest { public function authorize() { return true; } public function rules() { return [ 'title', 'required|max:255|min:3', 'content', 'nullable|max:255|min:10', ]; } } Note.php（模型） <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Note extends Model { use HasFactory; protected $guarded = []; } api.php <?php use App\Http\Controllers\NoteController; use Illuminate\Support\Facades\Route; Route::prefix('v1')->group(function () { Route::resource('/note', NoteController::class); }); php artisan 路线：列表 GET|HEAD / ...................................................................................................................... POST _ignition/execute-solution ............... ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolutionController GET|HEAD _ignition/health-check ........................... ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckController POST _ignition/update-config ........................ ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigController GET|HEAD api/v1/note .......................................................................... note.index › NoteController@index POST api/v1/note .......................................................................... note.store › NoteController@store GET|HEAD api/v1/note/create ................................................................. note.create › NoteController@create GET|HEAD api/v1/note/{note} ..................................................................... note.show › NoteController@show PUT|PATCH api/v1/note/{note} ................................................................. note.update › NoteController@update DELETE api/v1/note/{note} ............................................................... note.destroy › NoteController@destroy GET|HEAD api/v1/note/{note}/edit ................................................................ note.edit › NoteController@edit GET|HEAD sanctum/csrf-cookie .................................. sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show 迅雷请求（同邮递员） JSON 请求 { "title": "Hello World", "content": "Lorem ipsum." } 尝试发出 JSON POST 请求并获取状态：405 方法不允许并且我正在使用 php artisan 服务，如果需要，我可以提供 GIT 项目。请告诉我。 您的验证规则看起来不正确。在您的 NoteRequest 类中，规则应该是一个关联数组，其中键是字段名称，值是验证规则。但是，在您的代码中，规则被定义为以逗号分隔的字符串列表。这可能会导致验证失败并返回 405 Method Not allowed 错误。 public function rules() { return [ 'title' => 'required|max:255|min:3', 'content' => 'nullable|max:255|min:10', ]; }
这是小提琴（对警报感到抱歉）http://jsfiddle.net/PCcqJ/92/ var ractive = new Ractive({ 模板：'#templateOne'， 部分：{ aPartial：'哦，看，partia... 这是小提琴（抱歉有警报）http://jsfiddle.net/PCcqJ/92/ var ractive = new Ractive({ template: '#templateOne', partials: { aPartial: '<div>Oh look, the partial is rendered!</div>' } }); function cb() { alert('but now we unrender'); ractive.once('complete', function() { alert('we rendered again, and now you can\'t see the partial content'); }); ractive.render('container'); } ractive.render('container'); ractive.once('complete', function() { alert('so we render the first time, and you can see the partial'); ractive.unrender().then(cb); }); 此处的部分不会重新渲染。为什么是这样？部分仍在部分对象中，并且它们尚未渲染，那么什么会阻止它们再次渲染？ 这个小提琴会渲染、取消渲染，然后重新渲染，每次发生其中一种情况时都会向您发出警报。 我做了一个工作jsfiddle：https://jsfiddle.net/43gLqbku/1/ <div id='container'></div> <script id="templateOne" type="x-template"> {{>aPartial}} </script> var ractive = new Ractive({ el:"#container", template: '#templateOne', partials: { aPartial: '<div>Oh look, the partial is rendered!</div>' } }); function cb() { alert('but now we unrender'); ractive.once('complete', function() { alert('we rendered again, and now you can\'t see the partial content'); }); ractive.render('container'); } //ractive.partials.part = '<div>this is a partial</div>'; ractive.once('complete', function() { alert('so we render the first time, and you can see the partial'); ractive.unrender().then(cb); }); 在调用render之前需要调用ractive.once('completed') 你不需要 ractive.render("container");在活动代码下，因为它在第一次运行时自动呈现 在你的jsfiddle中你导入的ractive不起作用 你没有在 jsFiddle 活动代码中包含 el:"#container"
我正在尝试在我的项目中设置一个子域，但由于某种原因它不起作用。 路由::domain('{用户名}.' .env('APP_URL'))->group(function () { 返回“测试”； }); 它我...