Question

以下是我想寻求帮助的详细情况：

    <section class='result'> </section>
some tags... when the input value found/not found

我创建一个输入找到一些文本/条，如果输入值不能被发现，它会显示：

找不到抱歉input same value on box searching

然后我尝试再次单击按钮click，当我多次单击button时，它会一次又一次重复该文本...

sorry can't found 'input same value on box searching'
sorry can't found 'input same value on box searching'
sorry can't found 'input same value on box searching'
sorry can't found 'input same value on box searching'
sorry can't found 'input same value on box searching'

等等...

我只是希望它只是一次展示，而当输入的变化，它不会再去重复，它是会显示新的不同的值：sorry cant... 'new input value'

也就是说当输入数据不能被发现，并且当输入数据被发现，更改在搜索框中输入的数据后，我想删除该文本sorry cant...。

然后在找到文章后显示文章数据...

所以我希望得到一些帮助，怎么就不再赘述，然后插入新的标签之后，我发现输入的数据通过DOM。

这是代码： https://jsfiddle.net/cornloh/d2Lgkpxe/

const find = el => document.querySelector(el)
const create = el => document.createElement(el)

const lookingThem = find('.searchButton').addEventListener('click', (e) => {
  e.preventDefault()
  const inputText = find('.box').value.trim(); 
  // console.log(inputText.length);
  result(inputText);
})

const result = searching => {
  const wikipedia = `https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=20&srsearch=${searching}`; // API
  fetch(wikipedia)
    .then(resolve => resolve.json())
    .then(data => {
      if(typeof data.continue === 'undefined'){
        displayCantFound(find('.box').value)
      } else {
        console.log(data);
      }
    })
    .catch((e) => alert('an error occurred', e))
}

const displayCantFound = theInputValue => {
  find('.result').insertAdjacentHTML('beforeend',
  `<div>
      <h3> sorry can't found what you are looking ${theInputValue} </h3>
  </div>`)
}

// const displayError = () => {
//
// }

Answer 1

不要每次都插入新的html。只需完全替换它即可。

  fit('select all thumbnails',(done)=>{
      let newPracticeQuestionComponent = component;
      let imageThumbnailDivs = fixture.debugElement.query(By.css("div[id^=\"thumbnail\"]"));
      console.log("thumbnail divs before file upload ",imageThumbnailDivs);
      expect(imageThumbnailDivs).toBeFalsy();

      let file1 = new File(["foo1"], "foo1.txt");
      let file2 = new File(["foo2"], "foo2.txt");
      let file3 = new File(["foo3"], "foo3.txt");
      //let file4 = new File(["foo4"], "foo4.txt");
      let reader1 = newPracticeQuestionComponent.handleFileSelect([file1]);
      let reader2 = newPracticeQuestionComponent.handleFileSelect([file2]);
      let reader3 = newPracticeQuestionComponent.handleFileSelect([file3]);

      setTimeout(function() {
        console.log("in timeout");

        fixture.detectChanges();//without this, the view will not be updated with model
        let imageThumbnailDivsAfter = fixture.debugElement.query(By.css("div[id^=\"thumbnail\""));
        console.log("thumbnail divs after file upload ",imageThumbnailDivsAfter); //<-- this shows only the 1st element
        expect(imageThumbnailDivsAfter).toBeTruthy();
        //console.log("before done call")
        done();//without done, jasmine will finish this test spec without checking the assertions in the timeout
        //console.log("after timeout call")
      }, 2000);

  });

如果您希望在发现数据后消除错误，则可以将以下代码替换为我的

const displayCantFound = theInputValue => {
  find('.result').innerHTML  = `<div>
      <h3> sorry can't found what you are looking ${theInputValue} </h3>
  </div>`
}

的addEventListener：点击删除标记

1 个答案: