主页 / user-242352

Randall's questions

Martin Hope
Randall
Asked: 2020-04-27 18:44:10 +0000 UTC
  • 4

我绞尽脑汁想了很久，还是没能解决问题。

如您所见，有 3 个引导程序块：simplecontainer和.container art-projectscontainer-design-projects

我写了一个交换两个元素的脚本：当宽度小于像素时swap-element，swap-el第二个块。art projects990

问题是它们甚至在990像素之前就发生了变化（从1005像素开始），这破坏了我的布局。

这是codepen的链接。

请帮忙，我很困惑，为什么会发生这种情况？

document.addEventListener("DOMContentLoaded", ()=> {
    let w = document.documentElement.clientWidth;
    if (w < 990) {
        swapElements();
    } 
    if (w >= 990){
        preventDefaultSwap();
    } 
})

window.onresize = () => {
    let w = document.documentElement.clientWidth;
    
        if (w < 990) {
            swapElements();
        } 
        if(w >= 990) {
            preventDefaultSwap();
        }
}
swapElements = () => {
    let swapElement = document.querySelector(".swap-element");
    let swapElementSecond = document.querySelector(".swap-el");
    let swapBlock = document.querySelector(".swap-block");

    swapBlock.insertBefore(swapElementSecond, swapElement);
}
preventDefaultSwap = () => {
    let swapElement = document.querySelector(".swap-element");
    let swapElementSecond = document.querySelector(".swap-el");
    let swapBlock = document.querySelector(".swap-block");

    swapBlock.insertBefore(swapElement, swapElementSecond);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="container-fluid">
          <div class="row">
              <h1 class="block-title">what we do?</h1>
          </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 style-block" style="padding-left: 0 !important;">
          <div class="img-holder">
              <a href="https://placeholder.com">
                  <img class="empty-img" src="http://via.placeholder.com/560x560">
              </a>
          </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-5 col-xl-5 offset-lg-1 offset-xl-1 description" >
          <div class="about-project">
              <div class="project-title">
                  <h4 class="title">creative</h4>
                  <h1 class="bold-title">kitchen</h1>
              </div>

              <div class="project-content">
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis  accusamus voluptatum nemo eius?</p>
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis   accusamus voluptatum nemo eius?</p>
              </div>
              <div class="project-btn-holder">
                  <button class="learn-more">
                      <a href="/">Learn more</a></button>
              </div>
          </div>
      </div>
  </div>
</div>

<div class="container art-projects">
  <div class="row swap-block">
      <div class="col-sm-12 col-md-12 col-lg-5 col-xl-5 description swap-element no-padding">
          <div class="art-project">
              <div class="art-project-title">
                  <h4 class="art-title">art</h4>
                  <h1 class="art-bold-title">installation</h1>
              </div>

              <div class="art-project-content">
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa
                      voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis accusamus voluptatum nemo eius?</p>
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa
                      voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis accusamus voluptatum nemo eius?</p>
              </div>
              <div class="art-project-btn-holder">
                  <button class="art-learn-more">
                      <a href="/">Learn more</a>
                  </button>
              </div>
          </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 offset-lg-1 offset-xl-1 style-block swap-el" style="padding-right:0!important;">
          <div class="art-img-holder">
              <a href="https://placeholder.com">
                  <img class="art-empty-img" src="http://via.placeholder.com/560x560">
              </a>
          </div>
      </div>
  </div>
</div>
<div class="container design-projects">
  <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 style-block" style="padding-left: 0 !important;">
          <div class="design-img-holder">
              <a href="https://placeholder.com">
                  <img class="design-empty-img" src="http://via.placeholder.com/560x560">
              </a>
          </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-5 col-xl-5 offset-lg-1 offset-xl-1 description">
          <div class="design-project">
              <div class="design-project-title">
                  <h4 class="design-title">print</h4>
                  <h1 class="design-bold-title">design</h1>
              </div>

              <div class="design-project-content">
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa
                      voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis accusamus voluptatum nemo eius?</p>
                  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, culpa ab maiores debitis, non ipsa
                      voluptatem vel ipsum modi ex rem magni, ad labore. Maiores facilis accusamus voluptatum nemo eius?</p>
              </div>
              <div class="design-project-btn-holder">
                  <button class="des-learn-more">
                      <a href="/">Learn more</a>
                  </button>
              </div>
          </div>
      </div>
  </div>
</div>

javascript
Martin Hope
Randall
Asked: 2020-02-29 02:27:02 +0000 UTC
  • 0

请帮助一个星期，因为我无法正确组装文件，它显示警告

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  office.jpg (268 kB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
  main (456 kB)
      bundle.js
      style.css


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

我将使用我的webpack.config.js示例来显示错误

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const NODE_ENV = process.env.NODE_ENV || "development";
const webpack = require("webpack");
const tinypngCompress = require("webpack-tinypng-compress");

const config = {
    entry: "./common.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename:"bundle.js",
        publicPath:"dist/"
    },
    // performance: {
    //  maxEntrypointSize:400000
    // },
    module: {
        rules: [
            {
                use:"babel-loader",
                test: /\.js$/,
            },
            {
                loader:ExtractTextPlugin.extract({
                    loader:"css-loader",
                    options: {minimize:true}
                }),
                test: /\.css$/,
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    {
                        loader:"url-loader"
                        // options:{ limit:1000, name:"[name].[ext]" } 
                    },
                    "image-webpack-loader"
                ]
            }
        ]
    }, 
    plugins: [
        new ExtractTextPlugin("style.css"),
    ]
};
if (NODE_ENV == "production") {
    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false,
                drop_console:true,
                unsafe:true
            }
        })
    );
}
module.exports = config;

如您所见，按此顺序有一个注释掉的选项（在加载程序的底部） webpack 给出了错误

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  style.css (448 kB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
  main (456 kB)
      bundle.js
      style.css


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

如果我取消注释该行options，我会得到一个图片太重的错误这里是原始错误

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  office.jpg (291 kB)

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
css
Martin Hope
Randall
Asked: 2020-02-11 03:44:44 +0000 UTC
  • 1

再会。

我安装了这样一个问题，我babel-loader开始webpack看bundle.js里面绝对没有任何变化，也就是let原样，其他功能也保留了。但同时它webpack工作了，没有红色错误并开始跟踪watch:true

请帮忙，可能是什么问题？

这是我的webpack.config.js 

const NODE_ENV = process.env.NODE_ENV || "development";

module.exports = {
    entry: "./common",
    output: {
        path: __dirname + "/dist",
        filename:"bundle"
    },
    watch:NODE_ENV == "development",

    devtool:NODE_ENV == "development" ? "cheap-inline-module-source-map" : null,

    module: {

        rules: [{
            test: /\.jsx$/,
            loader: "babel",
            query:{
                presets:["es2015"],
            }
        }]

    }
};

common.js 

let  welcome = require("./script");

welcome("script");

脚本.js

module.exports = function(message){
    alert(`welcome${message}`);
};

除了文件夹中的bundle.js之外，所有文件都在同一目录中dist

webpack
Martin Hope
Randall
Asked: 2020-02-06 17:36:37 +0000 UTC
  • 1

你好。提交表单时，我进入页面

The page has expired due to inactivity. 

Please refresh and try again.

如何解决这个问题，以便当我点击提交按钮时，我不会被法庭抛出，而只是刷新页面。

其次，也是最重要的，在表单中提交数据后，我得到一个空数组，为什么？也就是说，按下按钮后，它submit会带我到我上面描述的页面，然后The page has expired due to inactivity.在顶部backspace单击它ctrl + u页面，你可以看到这段代码。

Array
(
)

为什么数组是空的？请告诉我修复它。

这是我的contact.blade.php模板

@extends ("default.layouts.layout")

@section("content")
<div style="display: flex;">
    <form method="post" action="{{ route ('contact') }}">
        <label for="name">Name</label>
        <input name="name" type="text" >
        <label for="e-mail">E-mail adress</label>
        <input  name="e-mail" type="text">
        <label for="site">Site</label>
        <input name="site" type="text" style="margin-bottom: 10px;" >

        <label for="text">Text</label>
        <textarea name="text"></textarea>
        <button style="background-color:lightslategrey" type="submit">Submit</button>
    </form>
</div>
<style>
    input {
        display: flex;
    }
</style>
@endsection

这是 ContactController控制器

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class ContactController extends Controller
{




    public function show(Request $request){

        print_r($request->all());

        return view("default.contact",["title"=>"Contacts"]);
    }
}

还有web.php路线

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/


Route::get("/",["as"=>"home","uses"=>"Admin\IndexController@show"]);

Route::get("/about",["uses"=>"Admin\AboutController@show", "as"=>"about"]);

Route::match(["get","post"],"/contact",["uses"=>"Admin\ContactController@show","as"=>"contact"]);
laravel
Martin Hope
Randall
Asked: 2020-02-05 19:16:56 +0000 UTC
  • 0

.row_without_margin {
	padding: 0 15px;
	display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.data_item {
	display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.date_range {
    height: 30px;
    padding: 13px 6px 13px 18px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0.5px 0.866px 4px 0 rgba(0,0,0,0.05);
    border: 1px solid #e3e4e5;
  /*  flex: 0 0 16.6666666667%;*/

}
#date-range1, #date-range2 {
	height: 30px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0.5px 0.866px 4px 0 rgba(0,0,0,0.05);
    border: none;
	width: 80%;
    padding-left: 40px;
    font-size: 16px;
    color: #000000;
    background: url(https://static.sanatorium.com/frontend/common/calendar_new.svg) no-repeat 0 center #fff;
}
<div class="row_without_margin">
  <div class="data_item">
    <div class="date_range">
      <input id="date-range1" name="daterange" size="40" value="05.02.2018" readonly >
    </div>
  </div>
  <div class="data_item">
    <div class="date_range">
      <input id="date-range2" name="daterange" size="40" value="Дата выезда" readonly >
    </div>
  </div>
  <div class="search_item">
    <div class="data_item">
      <div class="date_range">
        <div class="guests">
          <select>
            <option>1</option>
            <option>1</option>
            <option>1</option>
          </select>
        </div>
      </div>	
    </div>
  </div>
  <div class="search_item">
    <div class="data_item">
      <div class="date_range">
        <div class="guests">
          <select>
            <option>1</option>
            <option>1</option>
            <option>1</option>
          </select>
        </div>
      </div>	
    </div>
  </div>
</div>

你好，为什么这个版本中的空格样式不起作用？

css
Martin Hope
Randall
Asked: 2020-02-02 19:59:46 +0000 UTC
  • 0

大家好，请帮助一个laravel新手，我无法访问模板。一切运行稳定，但是我添加了一个新的控制器后，IndexController我无法访问任何模板。为什么会出现这种情况，请帮忙。

文件夹和文件更改的完整描述

在资源目录中，我添加了默认文件夹和welcome.blade.php.

目录中有controllers一个文件夹，admin其中添加的文件İindexController.php如下所示 

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class IndexController extends Controller
{
    public function show(){
        return view('default.welcome');
    }
}

最后，路由目录 web.php 文件

 Route::get("/", ["as"=>"home","uses"=>"Admin\IndexController@show"]);


 Route::get("/articles/{page}",["uses"=>"Admin\Core@getArticles", "as"=>"articles","middleware"=>"middle"]);

错误显示InvalidArgumentException View [default.welcome] not found。 请帮帮我

laravel
Martin Hope
Randall
Asked: 2020-02-01 21:58:34 +0000 UTC
  • 1

大家好。我只是无法将 CSS 文件连接到 webpack。在第 10 行写了一个错误，但由于我不熟悉node.js，我很难弄清楚。npm

已经安装了style-loader。

style.css与我得到的错误位于同一目录中home.js

这是我的webpack.config.js

"use strict";

const webpack = require('webpack');

module.exports = {
    entry: "./home",
    output: {
        filename: "bundle.js"
    }
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }

}

还有home.js

import $ from 'jquery';
import css from './style.css';
css
Martin Hope
Randall
Asked: 2020-01-29 20:06:43 +0000 UTC
  • 0

我是一个初学者和实验。我使用天气 API。我向该站点发送请求以获取有关天气的信息。

告诉我为什么控制台中没有显示任何内容，我做的一切正确吗？

var newRequest = new XMLHttpRequest();
newRequest.open("GET","http://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22");

newRequest.onload = () => {
	var ourWeather = JSON.parse(newRequest.responseText);
	console.log(ourWeather);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
	<h1>JSON and AJAX</h1>
	<button id="btn">Fetch info for 3 new animals</button>
</header>

javascript
Martin Hope
Randall
Asked: 2020-01-17 19:14:53 +0000 UTC
  • 0

你好。

在测试标签面板时，我遇到了这样的问题。

当您双击面板和文本块时，面板也会消失并立即再次显示。

我将页脚面板放下，以便您清楚为什么需要解决此问题。（否则，有些人可能会认为它消失并立即出现这里可能出现的问题）请帮我解决问题？

// TABS AFFIX
 // tabbed content

    $(".main_content").hide();
    $(".main_content:first").show();

  /* if in tab mode */
    $("ul.tabs_container li").click(function() {
    
      $(".main_content").hide();
      var activeTab = $(this).attr("rel"); 
      $("#"+activeTab).fadeIn();    
    
      $("ul.tabs_container li").removeClass("active_content");
      $(this).addClass("active_content");

    $(".tab_drawer_heading_main").removeClass("d_active");
    $(".tab_drawer_heading_main[rel^='"+activeTab+"']").addClass("d_active");
    
    });
  /* if in drawer mode */
  $(".tab_drawer_heading_main").click(function() {
      
      $(".main_content").hide();
      var d_activeTab = $(this).attr("rel"); 
      $("#"+d_activeTab).fadeIn();
    
    $(".tab_drawer_heading_main").removeClass("d_active");
      $(this).addClass("d_active");
    
    $("ul.tabs_container li").removeClass("active_content");
    $("ul.tabs_container li[rel^='"+d_activeTab+"']").addClass("active_content");
    });
  $('ul.tabs_container li').last().addClass("tab_last");
.filterlist_main {
	overflow: hidden;
	height: 100%;
	color: #37454d;
	direction: ltr;
	background-color: #fff;
	width: 100%;
}

ul.tabs_container {
	width: 250px;
	display: flex;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #cdd0d2;
    border-top: 1px solid #cdd0d2;
    border-left: 1px solid #cdd0d2;
	width: 100%;
	margin-bottom: 2px;
}
ul.tabs_container li {
	
	width: 250px;
	display: flex;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #cdd0d2;
    border-top: 1px solid #cdd0d2;
    border-left: 1px solid #cdd0d2;
	width: 100%;
}

ul.tabs_container li:hover {
	background-color: #ccc;
	color: #333;
}
ul.tabs_container li.active_content {
	border-bottom-color:#37454d;
	border-bottom: 2px solid #333;
	display: block;
}
ul.tabs_container .tabs-item.active_content {
	border-bottom-color:#37454d;
	border-bottom: 2px solid #333;
	display: block;
}
.tab_main_container {
	border-top: none;
	/*border: 1px solid #333;*/
	clear: both;
	float: left;
	width: 100%;
	background: #fff;
	overflow: auto;
}
.main_content {
	padding: 20px;
	display: none;
}
.tab_drawer_heading_main {
	display: block;
}

ul.tabs_container li:first-child {
    cursor:auto;
}
ul.tabs_container li:first-child:hover {
    cursor:auto;
    background-color: transparent;
    color:  #697379;
}
.tab_last { border-right: 1px solid #333; }
.footer {
  height:400px;
  background:red;
  width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-affix filterlist_main">
  <ul class="tabs_container">
    <span style="text-indent: 1em;line-height: 2;">Сортировать:</span>
    <li class="tabs-item active_content" rel="tab4">
      <button class="tabs-label">Our recommendations</button>
    </li>
    <li class="tabs-item" rel="tab5">
      <button class="tabs-label">Distance from city center</button>
    </li>
    <li class="tabs-item" rel="tab6">
      <button class="tabs-label">Rating based on reviews</button>
    </li>
    <li class="tabs-item" rel="tab7">
      <button class="tabs-label">Lowest price first</button>
    </li>
  </ul>
</div>
<div class="main">
  <div class="tab_main_container">
    <div class="center_content d_active tab_drawer_heading_main" rel="tab4">
      <div id="tab4" class="container_itemlist main_content" >
        fulpix
        <!-- BURA ATILACAG TEKST VAR -->
      </div>
    </div>
    <!-- tab 4 -->
    <div class="center_content active_content tab_drawer_heading_main" rel="tab5">
      <div class="container_itemlist main_content" id="tab5">
        chermander
      </div>
    </div>
    <!-- tab 5-->
    <div class="center_content active_content tab_drawer_heading_main" rel="tab6">
      <div class="container_itemlist main_content" id="tab6">
        bulbasaur
      </div>
    </div>
    <!-- tab 6-->
    <div class="center_content active_content tab_drawer_heading_main" rel="tab7">
      <div class="container_itemlist main_content" id="tab7">
        pikachu
      </div>
    </div>
    <!-- tab 7-->
  </div>
</div>
<div class="footer">
kakoy nibud footter
</div>

jquery
Martin Hope
Randall
Asked: 2020-01-16 21:40:46 +0000 UTC
  • 0

$(".tab_content").hide();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function() {
		
      $(".tab_content").hide();
      var activeTab = $(this).attr("rel"); 
      $("#"+activeTab).fadeIn();		
		
      $("ul.tabs li").removeClass("active");
      $(this).addClass("active");

	  $(".tab_drawer_heading").removeClass("d_active");
	  $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");
	  
    });

	$(".tab_drawer_heading").click(function() {
      
      $(".tab_content").hide();
      var d_activeTab = $(this).attr("rel"); 
      $("#"+d_activeTab).fadeIn();
	  
	  $(".tab_drawer_heading").removeClass("d_active");
      $(this).addClass("d_active");
	  
	  $("ul.tabs li").removeClass("active");
	  $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
    });
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #cdd0d2;
  border-top: 1px solid #cdd0d2;
  border-left: 1px solid #cdd0d2;
	width: 10.%;
}

ul.tabs li {
	float: left;
	margin: 0;
	cursor: pointer;
	padding: 0px 21px;
	height: 31px;
	line-height: 31px;
	background-color: transparent;
	color: #697379;
	overflow: hidden;
	position: relative;
}

.tab_last { border-right: 1px solid #333; }

ul.tabs li:hover {
	background-color: #ccc;
	color: #333;
}

ul.tabs li.active {
	border-bottom-color:#37454d;
	border-bottom: 2px solid #333;
	display: block;
}

.tab_container {
	border: 1px solid #333;
	border-top: none;
	clear: both;
	float: left;
	width: 100%;
	background: #fff;
	overflow: auto;
}

.tab_content {
	padding: 20px;
	display: none;
}

.tab_drawer_heading { display: none; }

@media screen and (max-width: 480px) {
	.tabs {
		display: none;
	}
	.tab_drawer_heading {
		background-color: #ccc;
		color: #fff;
		border-top: 1px solid #333;
		margin: 0;
		padding: 5px 20px;
		display: block;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.d_active {
		background-color: #666;
		color: #fff;
	}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
  <li class="active" rel="tab1">Наши рекомендации</li>
  <li rel="tab2">Расстояние от центра города</li>
  <li rel="tab3">Оценка по отзывам</li>
  <li rel="tab4">Самая низкая цена</li>
</ul>
<div class="tab_container">
  
  <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
  
  <div id="tab1" class="tab_content">
  <h2>Tab 1 content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p>
  </div>
  <!-- #tab1 -->
  <h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
  <div id="tab2" class="tab_content">
    
  <h2>Tab 2 content</h2>
    <p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p>
  </div>
  <!-- #tab2 -->

  <h3 class="tab_drawer_heading" rel="tab3">Tab 3</h3>
  <div id="tab3" class="tab_content">
  <h2>Tab 3 content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p>
  </div>
 <!-- #tab3-->

   
<!-- .tab_container -->
</div>

有这样一个标签菜单，你需要在里面添加文本<< Sort >>。

查看全屏以查看完整效果，因此在小模式下所有 4 个选项卡都不适合窗口。

请告诉我如何正确添加它，以便最终结果如图所示

在此处输入图像描述

jquery
Martin Hope
Randall
Asked: 2020-01-09 16:02:03 +0000 UTC
  • 0

想问一下 Ecmascript6 中的经典函数声明（FUNCTION DECLARATION）。

很多时候在ES6中看到这样的函数记录

let logMessage = message => {
    // etc
}

这种函数声明称为 FUNCTION EXPRESSION。但是我在任何地方都没有找到替代方案。在ES6中是否可以将函数声明为函数声明以及如何做到这一点，请举个例子。

ecmascript-6
Martin Hope
Randall
Asked: 2020-01-06 20:41:20 +0000 UTC
  • 0

$(".room-guests-count").click(function(e){
	$(".form-open").toggle();
	e.stopPropagation();
});
$('.form-open').click(function(e) {
  e.stopPropagation();
});
$(document).click(function() {
  $('.form-open').hide();
});

const room = document.querySelector('.room-guests-count');
const form = document.querySelector('.form-open');
const adultsChildren = document.querySelector('.adults-children');
const adultsChildrenWrapper = document.querySelector('.adults-children-wrapper');

// let roomCount = document.querySelectorAll("room-count");
let roomCount = document.querySelectorAll(".room-count");

   
// roomCount.style.backgroundColor = "red";

let formIsOpened = false;

room.onclick = () => {
  if(!formIsOpened) {
    form.style.display = 'block'
  } else {
    form.style.display = 'none'
  }
  formIsOpened = !formIsOpened;
}
const toggleRoom = () => {
  const addRoomButton = document.querySelector('#add-room');
  const removeRoomButton = document.querySelector('#remove-room');
  const countRoom = document.querySelector('.form-text');
  
  const addSection = () => {
    const wrapper = document.createElement("div"); //Создает новый элемент с указанным тегом:
    wrapper.className = "adults-children-wrapper"; // имя класса добавить к елементу
    // const template = adultsChildrenWrapper.innerHTML; // значение  adultsChildrenWrapper присваивается к template
    wrapper.innerHTML = adultsChildrenWrapper.innerHTML; // значение  adultsChildrenWrapper присваивается к wrapper                
    adultsChildren.appendChild(wrapper);
    
      
  }
  const removeSection = () => {
    adultsChildren.lastChild.remove();
  }
  
  addRoomButton.onclick = () => {
    if(countRoom.value == 4) return;
    countRoom.value++;

    roomCount[0].textContent++;

    // roomCount.textContent++;
    // if (countRoom.value >= 2)
    addSection();
    
  }

  removeRoomButton.onclick = () => {
    if(countRoom.value == 1) return;
    countRoom.value--;
    roomCount[0].textContent--;
    
    removeSection();
  }
  
  
}
toggleRoom();
* {
  background:lightblue;
}
/*ROOM GUESTS COUNT*/
.room-guests-count {
	width: 17.2%;
	cursor: pointer;
	margin-right: 4%;
	background: #fff;
	float: right;
	height: 66px;
	margin-right: 149px;
}
.form-open {
	display: none;
	position: absolute;
	z-index: -1;
	top: 110px;
	background-color: #fff;
	height: auto;
	right: -8px;
	width: 348px;
}

.form-open:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 10px solid #fff;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	right: 300px;
	top: -10px;
}
.room-guests-content {
	padding-top: 23px;
	padding-left: 15px;
}
.click_hidden_text {
	position: absolute;
	z-index: 1;
	left: 163px;
	top: 56px;
	opacity: 0.8;
}
.form-search {
	padding: 0;
	margin: 10px 10px 5px 10px;
	
}
.form-item {
	padding: 10px 5px;
	clear: both;
	height: 14px;
}
.edit-rooms {
	font-weight: normal;
	font-size: 13px;
	float: left;
	color: #000;
	margin-right: 5px;
}
.rooms-guests-plus {
	float: right;
	color: #fff;
	background:#ccc;
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	top: -6px;
	position: relative;
	font-size: 18px;
	cursor: pointer;
}
.form-text {
	text-align: center;
	width: 6%;
	width: 20px !important;
	text-decoration: center;
	float: right;
	border:0;
	padding: 0;
	height: auto;
	outline: 0;
	vertical-align: middle;
}
.textfield label {
	margin-right: 2.5px;
	display: inline;
	font-size: 13px;
}
.children-1 label {
	display: inline;
	font-size: 13px;
}
.rooms-guests-minus {
	float: right;
	color: #fff;
	background:#e7e7e7;
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	top: -6px;
	position: relative;
	font-size: 18px;
	cursor:auto;
}
.adults-children {
	clear: both;
}
.rooms-id {
	line-height: 40px;
	float: left;
	padding:5px 0 0 15px;
	color: #000;
}
.already-min {
	float: right;
	margin: -16px 0px 2px 6px;
	padding: 0;
	background: #fff;
}
.already-min-search {
	float: right;
	margin: 5px 10px 5px 2px;
}
.adults-children-wrapper {
	clear: both;
}
.children-1 {
	padding: 10px 5px;
	clear: both;
	height: 14px;
}
.edit-children {
	font-weight: normal;
	font-size: 13px;
	float: left;
	color: #000;
	margin-right: 5px;
}
.textfield {
	clear: both;
	height: 14px;
	margin: 0;
	position: relative;
	margin-top: 32px;
}
/*FORM FINISHED*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="room-guests-count">
  <div class="room-guests-content">
    Взрослых
    <span class="ga-count">2</span>
    , Детей 
    <span class="children-count">0</span>
  </div>
</div>
<div class="form-open">
  <div class="form-search">
    <div class="form-item">
      <label class="edit-rooms">Количество номеров</label>
      <div class="rooms-guests-plus" id="add-room">+</div>
      <input type="text" name="rooms" max="9" min="1" maxlength="128" class="form-text" value="1" size="60" readonly="readonly">
      <div class="rooms-guests-minus" id="remove-room">-</div>
    </div>
  </div>
  <div class="adults-children">
    <div class="adults-children-wrapper">
      <div class="rooms-id">Номер <span class="room-count">1</span>:</div>
      <div class="already-min-search">
        <div class="children-1">
          <label for="edit-children">Детей</label>
          <div class="rooms-guests-plus">+</div>
          <input type="text" name="childrenqt" value="0" max="5" min="0" maxlength="5" size="60" maxlength="128" class="form-text">
          <div class="rooms-guests-minus">-</div>
        </div>
      </div>
      <div class="already-min">
        <div class="textfield">
          <label for="edit">Взрослых</label>
          <div class="rooms-guests-plus">+</div>
          <input type="text" name="edit" value="2" max="10" min="0" maxlength="5" size="60" maxlength="128" class="form-text">
          <div class="rooms-guests-minus">-</div>
        </div>
      </div>
    </div>
  </div>
</div>

大家好，有这么简单的代码，当你点击+的时候，同步创建了一个block，加上，你可以看到，第一个元素统计了所有block的个数。其他所有block都稳定工作。我什么都试过了知道修复它，包括 for 循环

for(var i = 1;i < roomCount.length;i++){
   roomCount[i].textContent++;
}

请帮帮我

javascript
Martin Hope
Randall
Asked: 2020-12-28 18:56:44 +0000 UTC
  • 0

$(".room-guests-count").click(function(e){
	$(".form-open").toggle();
	e.stopPropagation();
});
$('.form-open').click(function(e) {
  e.stopPropagation();
});
$(document).click(function() {
  $('.form-open').hide();
});
//код которое должен добавить дубликат блока 
$("#add-room").on("click", function(){
//Получаем имя и комментарий из инпутов
 var adultsChildren = $(".adults-children-wrapper");
 //Добавляем результат к нужному блоку
 $('.adults-children').add("<div class='adults-children-wrapper'></div>");
});
body {
  background:lightblue;
}
/*ROOM GUESTS COUNT*/
.room-guests-count {
	width: 34%;
	cursor: pointer;
	margin-right: 4%;
	background: #fff;
	height: 66px;
	margin-right: 152px;
}
.form-open {
	display: none;
	position: absolute;
	z-index: -1;
	top: 83px;
	background-color: #fff;
	height: auto;
	left: 9px;
	width: 348px;
}

.form-open:after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 10px solid #fff;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	right: 300px;
	bottom: 93px;
}
.room-guests-content {
	padding-top: 23px;
	padding-left: 15px;
}
.click_hidden_text {
	position: absolute;
	z-index: 1;
	left: 163px;
	top: 73px;
	opacity: 0.8;
}
.form-search {
	padding: 0;
	margin: 10px 10px 5px 10px;
	
}
.form-item {
	padding: 10px 5px;
	clear: both;
	height: 14px;
}
.edit-rooms {
	font-weight: normal;
	font-size: 13px;
	float: left;
	color: #000;
	margin-right: 5px;
}
.rooms-guests-plus {
	float: right;
	color: #fff;
	background:#ccc;
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	top: -6px;
	position: relative;
	font-size: 18px;
	cursor: pointer;
}
.form-text {
	text-align: center;
	width: 6%;
	width: 20px !important;
	text-decoration: center;
	float: right;
	border:0;
	padding: 0;
	height: auto;
	outline: 0;
	vertical-align: middle;
}
.textfield label {
	margin-right: 2.5px;
	display: inline;
	font-size: 13px;
}
.children-1 label {
	display: inline;
	font-size: 13px;
}
.rooms-guests-minus {
	float: right;
	color: #fff;
	background:#e7e7e7;
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	top: -6px;
	position: relative;
	font-size: 18px;
	cursor:auto;
}
.adults-children {
	clear: both;
}
.rooms-id {
	line-height: 40px;
	float: left;
	padding:5px 0 0 15px;
	color: #000;
}
.already-min {
	float: right;
	margin: -16px 0px 2px 6px;
	padding: 0;
	background: #fff;
}
.already-min-search {
	float: right;
	margin: 5px 10px 5px 2px;
}
.adults-children-wrapper {
	clear: both;
}
.children-1 {
	padding: 10px 5px;
	clear: both;
	height: 14px;
}
.edit-children {
	font-weight: normal;
	font-size: 13px;
	float: left;
	color: #000;
	margin-right: 5px;
}
.textfield {
	clear: both;
	height: 14px;
	margin: 0;
	position: relative;
	margin-top: 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="room-guests-count">
  <div class="room-guests-content">
    Взрослых
    <span class="ga-count">2</span>
    , Детей 
    <span class="children-count">0</span>
  </div>
</div>
<div class="form-open">
  <div class="form-search">
    <div class="form-item">
      <label class="edit-rooms">Количество номеров</label>
      <div class="rooms-guests-plus" id="add-room">+</div>
      <input type="text" name="rooms" max="9" min="1" maxlength="128" class="form-text" value="1" size="60" readonly="readonly">
      <div class="rooms-guests-minus">-</div>
    </div>
  </div>
  <div class="adults-children">
  <div class="adults-children-wrapper">
    <div class="rooms-id">Номер 1:</div>
    <div class="already-min-search">
      <div class="children-1">
        <label for="edit-children">Детей</label>
        <div class="rooms-guests-plus">+</div>
        <input type="text" name="childrenqt" value="0" max="5" min="0" maxlength="5" size="60" maxlength="128" class="form-text">
        <div class="rooms-guests-minus">-</div>
      </div>
    </div>
    <div class="already-min">
      <div class="textfield">
        <label for="edit">Взрослых</label>
        <div class="rooms-guests-plus">+</div>
        <input type="text" name="edit" value="2" max="10" min="0" maxlength="5" size="60" maxlength="128" class="form-text">
        <div class="rooms-guests-minus">-</div>
      </div>
    </div>
  </div>
</div>

大家好，有一个问题，点击加号的时候，添加了已有区块的副本，点击减号的时候，又删除了，最终的结果，应该如图所示，不能添加了超过9个块。图片 1 图片 2

javascript
Martin Hope
Randall
Asked: 2020-12-25 20:27:27 +0000 UTC
  • 0

.main {
	background-color: transparent;
	width: auto;
	position: relative;
	height: 100%;

}

.center_content {
	padding: 0;
	background-color: #ebeced;
	margin: 0 auto;
}

.container_itemlist {
	min-height: 200px;
	position: relative;
}
#item-list {
	max-width: 975px;
	/*margin-left: 0px;
	margin: 0 auto;*/
}
.hotellist {
	min-height: 578px;
}
.item {
	position: relative;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	margin-bottom: 8px;
	box-shadow: 0 1px 4px rgba(41,51,57,.5);
	color: #37454d;
	background: #fff;
}
.item_wrapper {
	width: 100%;
	position: relative;
}
ol {
	list-style-type: none;
	padding: 0;
}
.image-wrapper:before {
	content: "";
	display: block;
	padding-top: 100%;
}
.item_image {
	position: absolute;
    top: 0;
    width: 100%;
    height: auto;
    left: 0;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
}
.image-area {
	padding: 8px 6px 8px 8px;
	width: 22.25%;
	float: left;
}
.image-wrapper {
	position: relative;
	line-height: 0;
	overflow: hidden;
}

.image-wrapper:hover{
	-webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.image_gallery {
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    margin: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    opacity: 0;
    display: block;
    background: 0;
    position: absolute;
    cursor: pointer;
    padding: 0;
    border:0;
} 
.image_gallery:hover {
	opacity: 1;
}
.text_wrapper {
	 left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    height: 71.5%;
    background-image: -webkit-linear-gradient(top,transparent,rgba(0,0,0,.25) 60%,rgba(0,0,0,.75));
    background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.25) 60%,rgba(0,0,0,.75));
}
.image_text {
	 color: #fff;
    font-weight: 700;
    line-height: normal;
    padding-top: 16px;
    font-size: 14px;
    bottom: 8px;
    left: 0;
    right: 0;
    position: absolute;
}
<div class="main">
  <div class="center_content">
    <div class="container_itemlist">
      <section id="item-list">
        <ol class="hotellist">
          <li class="item-order">
            <article class="item">
              <div class="item_wrapper">
                <div class="image-area">
                  <div class="image-wrapper">
                    <img src="http://imgec.trivago.com/itemimages/44/39/443961_v1_isq.jpeg" class="item_image">
                    <button type="button" class="image_gallery">
                      <span class="text_wrapper">
                        <span class="image_text">View images</span>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </article>
          </li>
        </ol>
      </section>
    </div>
  </div>
</div>

为什么悬停时图片超出了块我需要它在块内增加，如图所示，而不是超出块。在父元素Overflow hidden中，我指出正确，我不知道我做错了什么。请帮忙

html
Martin Hope
Randall
Asked: 2020-12-23 15:18:14 +0000 UTC
  • 1

$(".summary_1").click(function(){
	if ($("#hotel-facilities").is(":hidden")) {
			$("#hotel-facilities").slideDown("slow");
			$(".summary_1").addClass("open");
	}	else {
		$("#hotel-facilities").hide("slow");
			$(".summary_1").removeClass("open");
	}
});
$(".summary_2").click(function(){
	if ($("#lodging_type").is(":hidden")) {
			$("#lodging_type").slideDown("slow");
			$(".summary_2").addClass("open");
	}	else {
		$("#lodging_type").hide("slow");
			$(".summary_2").removeClass("open");
	}
});
.details {
	border-top: 1px solid #cdd0d2;
	border-bottom: 0;
	cursor: pointer;
}
.tab_content {
	display: none;
	position: relative;
	border-bottom: 1px solid #cdd0d2;
	width: 250px;
	user-select: none;
	outline: 0;
}
.is-hidden {
	display: none;
}
.summary_1, .summary_2 {
	font-size: 14px;
	padding: 14px 40px;
	position: relative;
	list-style-type: none;
	margin: 0;
	font-weight: 400;
}

.summary_1:before {
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/
	transform: translate(-50%,-50%) rotate(-90deg);
    will-change: translate,rotate;
}
.summary_2:before {
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/
	transform: translate(-50%,-50%) rotate(-90deg);
    will-change: translate,rotate;
}

.summary_1:after {
	transform: translate(-50%,-50%);
    will-change: translate,opacity;
}
.summary_2:after {
	transform: translate(-50%,-50%);
    will-change: translate,opacity;
}
.summary_1.open:before{ /* добавочный класс */
    transform:translate(-50%,-50%) rotate(-0deg);
    width:0;
}
.summary_2.open:before{ /* добавочный класс */
    transform:translate(-50%,-50%) rotate(-0deg);
    width:0;
}
.summary_1:after,
.summary_1:before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background-color: #37454d;
	display: block;
	position: absolute;
	top: 50%;
	transition: all .2s ease-in-out;
	opacity: 1;
	left: 21px;
	contain: strict;
}
.summary_2:after,
.summary_2:before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background-color: #37454d;
	display: block;
	position: absolute;
	top: 50%;
	transition: all .2s ease-in-out;
	opacity: 1;
	left: 21px;
	contain: strict;
}
.summary_1, .summary_2:hover {
	background: #ebeced;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="details">
  <h4 class="summary_1" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4>
  <div id="hotel-facilities" class="is-hidden">
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">24-hour reception (4923)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">24-hour room service (286)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Airport shuttle (602)</span>
      </label>
    </div>
      <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Beach umbrellas (2094)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Bungalows (152)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Business center (3052)</span>
      </label>
    </div>
        <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Casino (113)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Concierge (2187)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Conference rooms (2659)</span>
      </label>
    </div>
      <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Convenience store (1219)</span>
      </label>
    </div>
  </div>
</section>
<section class="details">
  <h4 class="summary_2" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Type of lodging</h4>
  <div id="lodging_type" class="is-hidden">
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Bed & Breakfast (427)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Camping Site (27)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Hostel (121)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Hotel (8967)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Motel (816)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Pension (243)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Serviced Apartment (493)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Vacation Home (3417)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Vacation Rental (11847)</span>
      </label>
    </div>
  </div>
</section>

大家好，有 2 个块，单击它们会打开。我为每个块编写了自己的类和自己的标识符。我需要以某种方式组合这些块。这样就没有重复的代码。为什么？因为该站点将有 9这样的块并为每个等编写summary_1, summary_2, summary_3, summary_4 ,summary_5并错误地给出你的风格，你需要有一个单一的类，如果不可能的话，你需要一个单一的标识符，这样代码就不会以这种方式重复。一切都写得优雅而正确。

jquery
Martin Hope
Randall
Asked: 2020-12-22 20:49:23 +0000 UTC
  • 0

$(".summary").click(function(){
	if ($("#hotel-facilities").is(":hidden")){
		$("#hotel-facilities").slideDown("slow");
		$(".summary:before").css({"-webkit-transform":"translate(-50%,-50%) rotate(0)"});
}	else {
	$("#hotel-facilities").hide("slow");
	$(".summary:before").css({"-webkit-transform":"translate(-50%,-50%) rotate(-90)"});
}

});
.is-hidden {
	display: none;
}
.summary {
	font-size: 14px;
	padding: 14px 40px;
	position: relative;
	list-style-type: none;
	margin: 0;
	font-weight: 400;
}
.summary:before {
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/
	transform: translate(-50%,-50%) rotate(-90deg);
    will-change: translate,rotate;
}
.summary:after {
	transform: translate(-50%,-50%);
    will-change: translate,opacity;

}
.summary:after,
.summary:before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background-color: #37454d;
	display: block;
	position: absolute;
	top: 50%;
	transition: all .2s ease-in-out;
	opacity: 1;
	left: 21px;
	contain: strict;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="details">
	<h4 class="summary" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4>
  <div id="hotel-facilities" class="is-hidden">
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">24-hour reception (4923)</span>
      </label>
    </div>
  </div>
</section>

大家好，有个任务是让你点击的时候，加号顺利变成减号，一切准备就绪，几乎只需要在 点击的帮助下给想要的元素添加想要的样式jquery，我就卡在这里了。.summary:beforetransform: translate(-50%,-50%) rotate(-90deg);-webkit-transform: translate(-50%,-50%) rotate(0);

jquery
Martin Hope
Randall
Asked: 2020-12-19 18:45:52 +0000 UTC
  • 0

.cs {
	padding: 50px 0 80px;
}
.cs h2 {
	text-align: center;
	font-size: 36px;
	line-height: 41px;
	margin-bottom: 60px;
	font-weight: 400;
	margin: 0 0 40px;
}

.cs .t {
	display: inline-block;
	width: 50%;
	line-height: 23px;
	text-align: center;
	vertical-align: middle;

} 
.cs .t .wp:first-child {
	margin-left: 0;
}
.cs .t .wp {
	width: 75px;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
}
.cs .t .wp img {
	width: 100%;
	border-radius: 40px;
	position: relative;
	opacity: 1;
	transition: opacity .5s ease-in-out;
}
.cs .t .wp span {
	display: none;
} 
<div class="cs">
  <h2>24/7 Customer Support</h2>
  <div class="t">
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/22_qyfcaezY.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/26_UTZtK9MY.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/29_r2HPbRjc.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/47_K7bg36vA.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/56_WuDKKWiZ.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/79_Wq5Fue3t.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/59_MGrdWrHU.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/60_ZRwxcmfT.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/71_nvT8vFjV.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/79_Wq5Fue3t.jpg">
      <span>Brendan</span>
    </div>
  </div>
</div>

有必要实现如图所示的叠加效果， 这样当悬停时图片会上升。如果有人需要这个资源，我在哪里找到这个效果。如果有可能，当您单击右侧和左侧的图片时，单击时会移开，如图所示。 在此处输入图像描述

javascript
Martin Hope
Randall
Asked: 2020-12-18 15:05:34 +0000 UTC
  • 0

::-webkit-input-placeholder {
	font-size: 14px;

}
::-webkit-input-placeholder {
	font-weight: bolder;
}
::-moz-placeholder  {
	font-size:14px; /* Firefox 19+ */
}
:-moz-placeholder  {
	font-size: 14px; /* Firefox 18- */
}
<input type=text placeholder="Canada (235 hotels)....">

有placeholder一个里面有文本，你需要第一个文本是粗体，第二个是简单的引号。我已经尝试过了，但没有帮助。有没有first-line其他选择或者我正在做有什么问题吗？不能htmlinputselectize.jshtml

javascript
Martin Hope
Randall
Asked: 2020-12-14 22:50:28 +0000 UTC
  • 2

命令之后，commit-m 当我写 的时候，它git push显示一个错误

 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/DuudeXX8/TripBaku-.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

帮助可能是什么问题？

git
Martin Hope
Randall
Asked: 2020-12-12 22:05:34 +0000 UTC
  • 4

/*LANGUAGE PICKER*/

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://www.freeiconspng.com/uploads/white-down-arrow-png-2.png') no-repeat 144px #141F26;
  border: #FEFEFE 1px solid;
  background-size: 10%;
  /*-webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
	box-shadow: inset 0px 0px 10px 1px #FEFEFE;*/
}

.select_join select {
  background: transparent;
  width: 170px;
  color: #fff;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}

.select_join select:focus {
  outline: none;
}
<div style="text-align:center;">
    <br/>
    <div class="select_join" style="margin-left:15px">
        <select name="txtCountry">
            <option value="1">Россия</option>
            <option value="2">Азербайджан</option>
            <option value="3">Украина</option>
        </select>
    </div>
</div>

你好。如何将背景选项更改为#141F26，但保持箭头为白色？

html