小编And*_*L64的帖子

使用 .hide() 隐藏导航栏

我搜索并搜索试图找出我的代码有什么问题。我想在某个屏幕宽度上完全隐藏导航栏,但我什么也没得到。JS fiddle 和 Code Pen 找不到任何东西,safari 也没有显示语法错误。我只在这里待了一个月,在这里我感谢任何帮助。

<!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">
    <title>No clue what I am doing</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/> 
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />     
  </head>
  <body> 
 <nav class="navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>     
    </div>
    <!-- Collect the nav links, forms, and other content …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery twitter-bootstrap

4
推荐指数
1
解决办法
1万
查看次数

如何检查变量中是否有任何一个大于0

如何从Typescript中的给定变量检查是否有任何变量大于0?

如何重写下面的代码,使其更优雅/简洁?

checkIfNonZero():boolean{
  const a=0;
  const b=1;
  const c=0;
  const d=0;
  //Regular way would be as below. 
  //How can this use some library instead of doing comparison for each variable
  if(a>0 || b>0 || c>0 || d>0){
   return true;
  }
  return false;
}
Run Code Online (Sandbox Code Playgroud)

javascript typescript reactjs angular

4
推荐指数
1
解决办法
81
查看次数

TypeScript:在 React 中的 props 中传递组件时如何定义类型?

这是代码示例,JS 版本工作正常。

我在 TS 中遇到的问题:

import React from 'react'

class Parent extends React.Component {
    render() {
      return (
        <Child Cpnt={<Header title='Header' />} />
        /* TS error on Cpnt */
      )
    }
  }

interface ChildProps {
    Cpnt: React.ComponentClass
}

class Child extends React.Component <ChildProps> {
    render () {
        const { Cpnt } = this.props
        return (
            <div>
                {{Cpnt}}
            </div>
        )
    }
}

interface HeaderProps {
    title: string
}

class Header extends React.Component <HeaderProps> {
    render () {
        const { title } …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs

4
推荐指数
1
解决办法
3235
查看次数

在div中查找特定字符串并删除其html元素

有没有办法使用JavaScript来查找特定的字符串并删除其'html元素.例如,我有以下html代码:

<div class="summary">
List of texts:
  <ul>
   <li>Text 0</li>
   <li>Text 1</li>
   <li>Text 2</li>
   <li>Text 3</li> 
   <li>Text 4</li>
   <li>Text 5</li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

我想隐藏"文本2",首先我想找到这个字符串然后隐藏它.我试过的是使用html().替换但它只隐藏文本而不是元素. 的jsfiddle

html javascript jquery

3
推荐指数
1
解决办法
1100
查看次数

响应表单,提交对象,然后将其推送到数组

我是 React 的新手,不确定如何执行此操作。

我有一组对象,这些对象已映射并在我的视图中呈现。我想要做的是设置一个表单,将每个字段的值提交给新对象的相应属性,但我不确定如何执行此操作。

这是我在视图中呈现的初始数据:

contactArray = [
  {
    name: 'John'
    email: 'john@email.com'
    number: 111-111-111
  },
  {
    name: 'Dave'
    email: 'dave@email.com'
    phone: '222-222-222'
  }
]
Run Code Online (Sandbox Code Playgroud)

然后我有一个表格:

class InputForm extends Component {
  render() {
    return (   
        <form>
          <input type='text' onChange={this.handleChange}/>
          <input type='text' onChange={this.handleChange}/>
          <input type='text' onChange={this.handleChange}/>
          <button type='submit' onSubmit={this.handleSubmit}>SUBMIT</button>
        </form>
    ) 
  }
Run Code Online (Sandbox Code Playgroud)

然后我假设我将状态声明为:

constructor(props) {
  super(props);
  this.state = {
    name: '',
    email: '',
    phone: ''
  }
}
Run Code Online (Sandbox Code Playgroud)

然后提交功能我真的不知道怎么处理...

handleSubmit() {
  // not sure about this...
  this.setState({
    name: // ????
    email: // …
Run Code Online (Sandbox Code Playgroud)

javascript forms arrays submit reactjs

3
推荐指数
1
解决办法
1万
查看次数

未捕获的ReferenceError:未定义rgba

我正在尝试制作一个可以改变字体颜色的简单动画,但我正在努力解决所述参考错误.有人能指出我正确的方向吗?我已经安装了颜色动画jQuery-plugin.

HTML:

<ul class="menu"> 
<li><a href="">ABOUT US</a></li>        
<li><a href="">CONTACT</a></li>   
</ul>
Run Code Online (Sandbox Code Playgroud)

JS:

$('.menu').find('a').on('mouseenter', function() {
    $(this).css({color: rgba(239, 231, 35, 0.8)});
});
Run Code Online (Sandbox Code Playgroud)

html javascript jquery

3
推荐指数
1
解决办法
3612
查看次数

JavaScript split()使用公共字符然后使用不同的字符join()

假设我有一个字符串:/someFolder/anotherFolder/fileName并且我想用a替换所有正斜杠,"+"那么这将起作用:

var someString = '/someFolder/anotherFolder/fileName'
someString.split('/').join('+');
Run Code Online (Sandbox Code Playgroud)

或者使用正则表达式,这将工作:

var someString = '/someFolder/anotherFolder/fileName'
someString.replace(/\//g, "+");
Run Code Online (Sandbox Code Playgroud)

但是如果我想用'+'代替第一次出现,然后用另一个字符替换第二次出现,比如说' - ',第三次出现'*'等等,以便someString上面的字符串返回,那将是最好的方法:

+someFolder-anotherFolder*fileName
Run Code Online (Sandbox Code Playgroud)

javascript regex replace

3
推荐指数
1
解决办法
100
查看次数

如何在输入中显示单选按钮值

我有具有相同名称和相同ID的单选按钮,它们是动态数据,我想在输入中显示这些单选按钮值,但是当我检查单选按钮时,即使我检查了第二个单选按钮,输入中也只显示第一个单选按钮值或第三个单选按钮。

我有三个输入类型的单选按钮,它们具有相同的名称和ID,但具有不同的值,我正在检查第二个和第三个单选按钮,但它仅在输入中显示第一个单选按钮值。

<!DOCTYPE html>
<html>
<body>

<input type="radio" name="colors" onclick="myFunction()" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction()" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction()" value="green" id="myRadio">Green color


<input type="text" id="demo">

<script>
function myFunction() {
  var x = document.getElementById("myRadio").value;
  document.getElementById("demo").value = x;
}
</script>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

当我检查红色时,其值应在带有id演示的输入类型上显示,如果我检查绿色或蓝色,则应在具有id演示的输入中显示这些值。

javascript jquery

3
推荐指数
1
解决办法
654
查看次数

React-responsive-modal:打开模态时更改背景颜色

我使用react-responsive-modal 在我的 react 应用程序中打开一些模态。当我打开模态时,有一个叠加效果使模态后面的背景变暗。有没有办法使背景变暗 100% 或为背景设置任何颜色,这样我就看不到打开模态之前存在的东西,直到我再次关闭模态?

ModalComponent在 my 中为模态创建了一个新组件,MainComponent当我单击按钮时会呈现该组件:

ModalComponent

render() {
 return (
  <div className="childDiv">
    <Modal
      open={open}
      onClose={this.onCloseModal}
      center
      classNames={{
        transitionEnter: styles.transitionEnter,
        transitionEnterActive: styles.transitionEnterActive,
        transitionExit: styles.transitionExitActive,
        transitionExitActive: styles.transitionExitActive
      }}
      animationDuration={1000}
    >
   ...
Run Code Online (Sandbox Code Playgroud)

主要组件:

<div>
    <div className="outter" onClick={this.openModal.bind(this)}>
//Open Modal when clicking on this div
      <p className="arrival">Ankunft am Ziel: ~ {this.props.arrival} Uhr</p>
      <p className="price">max. {this.props.price} €</p>
      {this.state.open && (
        <BookingModalNew
          open={this.state.open}
          triggerCloseModal={this.closeModal.bind(this)}
          destination={this.props.destination}
          arrival={this.props.arrival}
          price={this.props.price}
        />
      )}
//Whole Stuff should not be visible while …
Run Code Online (Sandbox Code Playgroud)

javascript css jsx reactjs react-modal

3
推荐指数
1
解决办法
1万
查看次数

为什么初始 CSS 样式在 DOM 元素 .style 字段上不可见?

好的,我完全期望因为问一些愚蠢的(或至少是重复的)事情而火上浇油,但是在附加的代码段中,为什么我必须使用window.getComputedStyle来访问 CSS 应用的样式?我的印象是该.style字段至少会反映最初由 CSS 应用的样式,和/或从那时起手动更改的样式。

如果不是,那么控制元素.style字段中反映(以及何时)反映哪些属性的确切规则是什么?

setTimeout(() => {
    console.log("the bckg color:", reddish.style.backgroundColor);
    console.log("the width:", reddish.style.width);
    console.log("from a computed style:", window.getComputedStyle(reddish).backgroundColor);
    console.log("from a computed style:", window.getComputedStyle(reddish).width);
}, 100);
Run Code Online (Sandbox Code Playgroud)
#reddish {
    background-color: #fa5;
    width: 100px;
    height: 100px;
}
Run Code Online (Sandbox Code Playgroud)
<html>
    <body>
        <div id="reddish"></div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

javascript css stylesheet getcomputedstyle

3
推荐指数
2
解决办法
1905
查看次数