小编And*_*rew的帖子

我想知道如何选择类名为"widget"和"hover"的所有元素,然后从这些元素中删除类"hover".

我有以下JavaScript代码,用于选择类"widget"和"hover"的所有元素:

var elements = document.getElementsByClassName('widget hover');
console.log(elements);

这似乎工作并输出这样的东西(没有错误):

[div#.widget... 

问题是,如果我尝试删除类"悬停",我收到一个错误:

var elements = document.getElementsByClassName('widget hover');
console.log(elements);
elements.classList.remove("hover");

这输出:

[item: function]
length: 0
Uncaught TypeError: Cannot call method 'remove' of undefined 

谁能告诉我我做错了什么？

请注意我在jQuery中使用它:

$('.widget.hover').removeClass('hover');

...但我正在寻找纯JavaScript的解决方案.

我创建了一个由按钮组成的水平菜单.我需要这些按钮来调整宽度,以便它们一起占据菜单容器宽度的100%.它的行为应该与TD在TABLE中的行为相同.

因此,这是我提出的代码:

<div id="menubar">
    <div id="menu">
        <div class="button">
            <Button>Button 1</Button>
        </div>
        <div class="button">
            <Button>Button 2</Button>
        </div>
        <div class="button">
            <Button>Button 3</Button>
        </div>
        <div class="button">
            <Button>Button 4</Button>
        </div>
    </div>
</div>

和我的CSS:

#menubar {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
}

#menu {
    display: table-row;
}

#menu .button {
    position: relative;
    display: table-cell;
}

#menu .button Button {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
}

除了Mozilla之外,这在每个浏览器中都能完美运行 Mozilla似乎并不尊重按钮类的相对位置,因此,按钮全部定位在彼此的顶部(而不是绝对在DIV中使用类"按钮").

经过一些进一步的研究,似乎这是一个已知的问题,当显示设置为"表格单元格"时,Mozilla不是各自的位置"相对".

有谁知道一项工作来实现我想要做的事情？

注意:菜单是动态的,所以我不知道会有多少个按钮,所以我不能为每个按钮提供百分比宽度.

我有一条路线,我正在使用auth中间件,它工作得很好.

Route::group(['prefix' => 'v1','middleware' => ['auth:api']], function()
{
  Route::resource('user', 'v1\MyController');
});

问题是我也希望这条路由也可以被非认证用户访问.有了上述内容,我收到401 Unauthorized错误,我无法为未经身份验证的用户返回任何内容.那么,如何验证此路由(以便传递用户数据),同时即使用户未经过身份验证也允许路由继续进行？

(我尝试在路由器页面上进行有条件的Auth检查,但似乎用户已通过身份验证,因此它始终保持错误.)

编辑:我还应该注意,我正在使用带有密码授予和访问令牌的API路由.

是否有一个CSS选择器用于具有类的子项的第一个实例？例如,请使用以下代码:

<div id="container">
    <div class="nothing">
    </div>
    <div class="child"> <!-- SELECT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
</div>

是否有一个css选择器来设置第一次出现div类"child"的样式？

使用jQuery,有谁知道如何清理这个标记:

<span style="font-size:19px">
  <span style="font-size:20px">
    <span style="font-size:21px">
      Something
    </span>
  </span>
</span>

......并将其转化为:

<span style="font-size:21px">
  Something
</span>

如果有人能指出我正确的方向,我将不胜感激.或者,如果有人知道任何可以从HTML中删除无用标签的库,那也会很棒.

UPDATE

上面的代码只是一个例子.例如,可能有20个包裹的跨度......

这对其他人来说可能是显而易见的，但我不知道在以下代码中递归调用函数的语法：

//request.js
    export default {

      send() {
       ... do stuff ...
       this.send(); // Can't call "send" of undefined
      }
    }

//main.js
import request from './request'

export default class Main extends Component {
   init() {
      request.send();
  }
}

在上面的示例中，我从 main.js 调用发送函数。所有这些都工作正常，但我在发送函数中有一个条件可以调用相同的函数。问题是我不知道如何从函数内部调用该函数。有人吗？

在下面的例子中,我有一个简单<table>的内部有一个复选框.我在td,tr和复选框上点击了事件.我希望能够单击复选框并停止冒泡到td和tr.一个简单的"event.stopPropagation()"效果很好.

问题是,如果我想<label>使用"htmlFor" 将a连接到复选框,则单击标签时事件不会停止冒泡(即使它仍然按预期工作,单击复选框本身).甚至更奇怪的是,冒泡似乎发生在一个奇怪的顺序(如最后收到Checkbox点击!).

这是代码:

var Hello = React.createClass({
  func1(e){
    console.log('tr was clicked')
  },
  func2(e){
    console.log('td was clicked')
  },
  func3(e){
    e.stopPropagation();
    console.log('Checkbox was clicked')
  },
  render: function() {
    return <table>
        <tbody>
        <tr onClick={this.func1}>
          <td onClick={this.func2}>
            <input id="thing" type="checkbox" onClick={this.func3} />                                   
            <label htmlFor="thing"> label for checkbox</label>
          </td>
        </tr>
      </tbody>
    </table>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

...这里是小提琴:https: //jsfiddle.net/69z2wepo/52785/ (查看控制台的点击事件)

这个问题与 jQuery 的 UI 相关。

任何人都可以提供一个例子来执行以下操作：

1. 容器 A 是可排序和可丢弃的
2. 任何元素都可以拖入容器 A 中，然后进行排序。
3. 任何元素都可以从容器 A 中拖出，然后就可以在页面上拖动了。
4. 容器 A 也可以在页面上拖动

这是我到目前为止：

$(function() {
    $("#sortable").sortable().droppable();
    $("#sortable").disableSelection();
    $("#drop").droppable({
        accept: "#sortable li",
        drop: function (evt, ui) {
            var $destination = $(this); 
            ui.draggable.appendTo( $destination ); 

        }
    }).draggable();
});

我在这里创建了一个小提琴：http : //jsfiddle.net/eEJHb/1/

我遇到的问题：A）我无法将可排序放入容器 B）一旦进入容器，我需要将元素拖回可排序列表

谢谢你的帮助！

更新 ** 我的部分问题在于选项“connectWith”。它根本不起作用。相反，我使用了选项“connectToSortable”（作为可拖动中的一个选项），并且我能够将可排序和可拖动一起工作。