Question

我试图在论坛中创建一个过滤线程和用户的小脚本，我已经获得了线程过滤的代码。将其调整为用户过滤应该像更改选择器一样简单，但我尝试的任何选择器除了a（具有任何目标属性）之外它只是不起作用，在使用我直接尝试的高级选择器之前按span抓取元素并且也没有用，所以问题不在于选择器。

我在这里复制了主题列表：

https://codepen.io/anon/pen/awqyoj

＆＃13;

//For threads
//document.querySelectorAll('a[href*="showthread.php"]')

//For users
//document.querySelectorAll('span[onclick*="member.php?u="]')


//The filters
var Filters = ["useless","testing","Dude","User"];

//The code
var FilterThis = document.querySelectorAll('a');

for (var i = 0; i < FilterThis.length; i++) {
  checkToBlock(FilterThis[i], "text");
}

function checkToBlock(obj, namePropText) {
  var text = obj[namePropText];

  for (var i = 0; i < Filters.length; i++) {
    if (text.toLowerCase().indexOf(Filters[i].toLowerCase()) !== -1) {
      obj.closest("tr").style.opacity = ".1";
    }
  }
}
//style.display = "none"

＆＃13;

body {
  margin: 32px;
}
a:link {
  color: #cc3300;
  text-decoration: none;
}
a:visited {
  color: #cc3300;
  text-decoration: none;
}
a:hover, a:active {
  color: #330099;
  text-decoration: underline;
}

td {
  font: 10pt verdana;
}
.tborder {
  background: #D1D1D1;
  color: #000000;
  border: 0px solid #a1a1a1;
}
.alt1 {
  background: #F1F1F1;
  color: #000000;
}

.smallfont {
  font: 11px verdana;
}

＆＃13;

<table class="tborder" id="threadslist" width="100%" cellspacing="1" cellpadding="5" border="0" align="center">
  <tbody id="threadbits_forum_12">
    <tr>
      <td class="alt1" id="td_threadtitle_0001" title="">
        <div>
          <a href="showthread.php?t=0001" id="thread_title_0001">Random thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=100', '_self')">User</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0002" title="">
        <div>
          <a href="showthread.php?t=0002" id="thread_title_0002">Just a thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=100', '_self')">User</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0003" title="">
        <div>
          <a href="showthread.php?t=0003" id="thread_title_0003">Another thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=200', '_self')">Dude</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0004" title="">
        <div>
          <a href="showthread.php?t=0004" id="thread_title_0004">Useless thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=200', '_self')">Dude</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0005" title="">
        <div>
          <a href="showthread.php?t=0005" id="thread_title_0005">Intresting thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=300', '_self')">That guy</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

你的问题在于：

class SingleItem extends React.Component {
  render() {
    let data = this.props.data;

    return (
        <li>
            <div> {data.name} </div>
        </li>
    );
  }
}

class ItemList extends React.Component {
   render() {
     let itemArr = this.props.items;

     let listItems = itemArr.map((itemObj) => {
        return <SingleItem key={itemObj.id} data={itemObj}/>;
});

    return (
        <ul onClick={props.handleEvent}>
            {listItems}
        </ul>
    );
  }
}

class App extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        boxOne: {listItems},
        boxTwo:''
    };

    this.handleEvent = this.handleEvent.bind(this);
}

handleEvent() {
    this.setState({
        boxOne: this.state.boxTwo,
        boxTwo: this.state.boxOne
    });
}
render() {
    return (
        <div>
            <ItemList items={this.state.boxOne} />
            <ItemList items={this.state.boxTwo} />
        </div>
    );
  }
};

var items = [
  {name: "Item 1", id: 1},
  {name: "Item 2", id: 2},
  {name: "Item 3", id: 3},
  {name: "Item 4", id: 4},
]

ReactDOM.render(<App />, document.getElementById('root'));

以上适用于checkToBlock(FilterThis[i], "text");代码，因为<a>标记元素上存在属性文本时存在差异，而<a>适用于文本包含<的所有元素/ em> textContent标签。这个不规则性在SO问题中描述：Difference between text and textContent properties。

要获取元素的文本内容，属性为<a>。修改您的代码如下：

textContent

这也是一个修改过的片段：

checkToBlock(FilterThis[i], "textContent");

//For threads //document.querySelectorAll('a[href*="showthread.php"]') //For users //document.querySelectorAll('span[onclick*="member.php?u="]') //The filters var Filters = ["useless","testing","Dude","User"]; //The code var FilterThis = document.querySelectorAll('span[onclick*="member.php?u="]') for (var i = 0; i < FilterThis.length; i++) { checkToBlock(FilterThis[i], "textContent"); } function checkToBlock(obj, namePropText) { var text = obj[namePropText]; for (var i = 0; i < Filters.length; i++) { if (text.toLowerCase().indexOf(Filters[i].toLowerCase()) !== -1) { obj.closest("tr").style.opacity = ".1"; } } } //style.display = "none"

body { margin: 32px; } a:link { color: #cc3300; text-decoration: none; } a:visited { color: #cc3300; text-decoration: none; } a:hover, a:active { color: #330099; text-decoration: underline; } td { font: 10pt verdana; } .tborder { background: #D1D1D1; color: #000000; border: 0px solid #a1a1a1; } .alt1 { background: #F1F1F1; color: #000000; } .smallfont { font: 11px verdana; }

如何使用onclick属性选择span？

1 个答案: