小编Eva*_*nss的帖子

对于我的响应式网站,我希望将英雄图像作为背景图像而不是html中的图像.

我可以轻松地将div设为100%宽度,但我不确定如何使它具有正确的高度.我必须在px中设置一个高度,但所需的高度取决于div的宽度,该宽度因站点响应而变化.

<div class="cont">
  <p>Below is an image in the html that scales correctly</p> 
  <img src="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" />
  <p>The example below is a background image in CSS</p>
  <div class="hero-img"></div>
  <p>Some text</p>
</div>

.cont {
  width: 20%;
  margin: auto
}
img {
  max-width: 100%;
}

.hero-img {
  background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") no-repeat;
  background-size: 100% 100%;
  height: 200px;
}

http://codepen.io/anon/pen/FBxkz

更新 - 背景大小封面或包含不解决我的问题.带图像的div仍然具有固定的高度.

http://codepen.io/anon/pen/FCafi

我用它来切换元素的可见性:

$(".trigger").click(function() {
    $(this).next().slideToggle();
});

<p class="triggger">Trigger</p>
<p class="target">this is the target</p>

它的工作乐趣,但我想这样做,所以下一个元素只有切换,如果它有一类目标.以下不起作用:

$(this).next().hasClass("target").slideToggle();

我有 Mamp Pro。我尝试通过命令行导入数据库，因为它对于 PHPMyAdmin 来说太大了，使用以下说明：http ://nickhardeman.com/308/export-import-large-database-using-mamp-with-terminal/

当我输入以下内容时，系统会提示我输入密码：

/applications/MAMP/library/bin/mysql -u root -p DBNAME.sql < /Applications/MAMP/htdocs/FOLDERNAME 

但是，当我输入它时，我收到以下消息：

ERROR: Can't initialize batch_readline - may be the input source is a directory or a block device.

我在一个容器中有 7 件物品。如何使前 3 个为全宽，接下来的 7 个为 50% 宽度？

我还需要在视觉上位于同一行的元素具有相同的高度。

如有必要，我可以为此使用 flexbox。在这个演示中，容器有一个固定的宽度，但实际上它是一个响应式布局，所以宽度是变化的。

http://codepen.io/anon/pen/yJoPwK

.cont {
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  width: 200px;
  margin: auto;
}
.item-1 {
  background: blue;
}
.item-2 {
  background: green;
}
.item-3 {
  background: yellow;
}
.item-4 {
  background: blue;
}
.item-5 {
  background: grey;
}
.item-6 {
  background: orange;
}
.item-7 {
  background: gold;
}
.item-4,
.item-5,
.item-6,
.item-7 {
  width: 50%;
}

<div class="cont">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div …

我试图返回我的列表项的数组,如果它们包含文本"Flexbox".

我得到这个错误: Uncaught TypeError: items.filter is not a function

    <ul>
        <li data-time="5:10">Flexbox 1</li>
        <li data-time="5:10">Something else</li>
        <li data-time="5:40">Flexbox 2</li>
        <li data-time="5:10">Something also else</li>
        <li data-time="5:40">More Flexbox for you</li>
    </ul>


'use strict';

var items = document.querySelectorAll('li');

var itemsFlex = items.filter(function(item) {
    return item.includes('Flexbox')
});

console.log(itemsFlex);

我映射一个对象，以便我可以提取其中的一些项目并在它们周围添加 HTML。然后我将其写入页面。

这是有效的，只是页面每个项目后面都有逗号。我怎样才能删除这些逗号？

const input = document.querySelector('.search-form input');
  const shownResults = document.querySelector('.suggestions');
  let searchQuery = "";


  const updatepage = function (filteredCities) {
    let filteredCitiesHtml = filteredCities.map((item) => {
      return `<li>${item.city} - ${item.state}</li>`;
    });

    shownResults.innerHTML = filteredCitiesHtml;
    console.log(filteredCitiesHtml);
  };

  const filterCities = () => {
    const filteredCities = cities.filter((item)=> {
      if (
        item.state.toLowerCase().includes(searchQuery) ||
        item.city.toLowerCase().includes(searchQuery)
        ) {
        return true;
      }
    });
    updatepage(filteredCities);
  };

  // func to search list for string
  const getSearchQuery = function () {
    searchQuery = input.value.toLowerCase();
    filterCities();
  }; …

我有一个函数，它返回一个具有过滤器、排序和映射的数组。如何在排序之前将新项目推入数组？

当我尝试以下操作时，我收到一条错误消息，说 push 不是一个函数。

return (
  myArray
    .filter((item) => {
      return item.value > 2;
    })
    .push(newThiny) // This doesn't work
    .sort((a, b) => {
      if (a.name < b.name)
        return -1;
      if (a.name > b.name)
        return 1;
      return 0;
    })
    .map((item) => {
      return (
        <ChooseAnExercises
          key={item.name}
          name={item.name}
          active={item.active}
          setNumber={this.props.number}
          updateValue={this.props.updateValue}
        />
      )
    })
)

使用 JavaScript 导入命名导出、重命名并再次导出的最短方法是什么？

此代码有效，但感觉比应有的更冗长

import { mock as myFunctionMock } from 'context/myFunction';
export const myFunction = myFunctionMock;

如何将 TypeScript 类型添加到事件measure内的回调中onLayout？

  <View
    ref={containerViewRef}
    onLayout={() => {
      if (containerViewRef.current) {
        containerViewRef?.current?.measure(
          (x, y, width, height, pageX, pageY): MeasureOnSuccessCallback => {
            setPageY(pageY);
          },
        );
      }
    }}
  >

measure有这个错误：

TS2339：类型“never”上不存在属性“measure”。

并且MeasureOnSuccessCallback有这个错误：

TS2355：声明类型既不是“void”也不是“any”的函数必须返回一个值。

我使用 React Navigation 的useNavigation钩子：

在 MyComponent.js 中：

import { useNavigation } from "@react-navigation/native";

const MyComponent = () => {
    const navigation = useNavigation();
    const handleNav = () => {
        navigation.navigate("about");
    };
    return(
        <TouchableOpacity onPress={handleNav}>
            <Text>About</Text>
        </TouchableOpacity>
    )
}

有没有办法将此功能移至自定义挂钩？我尝试了以下方法：

在useCustomNav.js中：

import { useNavigation } from "@react-navigation/native";

const useCustomNav = ({ to }) => {
  const navigation = useNavigation();
  navigation.navigate(to);
  return null;
};

export default useCustomNav;

在 MyComponent.js 中：

import useCustomNav from './useCustomNav';

const MyComponent = () => { …